Events are clicks, key press, or mouse moves. Timing and order of event cannot be predicted. Browser puts it in a queue of events, looks for event listeners and then the correct type of event is called.
You can add event listener in different ways.
Method #1
addEventListener('click',processClick);
function processClick(evt){
alert("There was a click");
}Method #2
addEventListener(‘click’, function processClick(evt){
alert(“There was a click”);
});Method #3
//anonymous function
addEventListener('click',function (){
alert("This is a anonymous function");
});Method #4
//windows object
window.onclick = processClick;
function processClick(evt){
alert("Windows click");
}Method #5
//Directly on the HTML element
<body>
<button onclick="processClick()">Click Me</button>
<script>
function processClick(){
console.log(“Clicked”);
}
</script>
</body>Event Object
The event object is passed through the function if necessary. Every event like mouse, and keyboard has its own event properties.
However, there are events that are common to all events
| Event Property | Description |
| event.type | return name of the event |
| event.target | return HTML on which event took place |
| event.stopPropagation | stop the bubbling up of the event chain |
| event.preventDefault | stop the default behavior of that results from the event. You can specify a new custom response. |
Property: evt.type
<button id=”myButton”>Press Me</button>
<script>
var b = document.querySelector(“myButton”);
b.addEventListener(‘click’, processClick);
function processClick(evt){
alert(evt.type);
}
</script>Property : evt.target
<button id=”myButton”>Press Me</button>
<script>
var b = document.querySelector(“myButton”);
b.addEventListener(‘click’, processClick);
function processClick(evt){
alert(evt.target);
}
</script>
//Output = Object HTML Button ElementProperty : evt.preventDefault
<body>
<button id="myButton">Click Me</button>
<script>
var b = document.querySelector("#myButton");
b.addEventListener('click', processClick);
function processClick(evt){
evt.preventDefault;
}
</script>
</body>
Output = The usual button click will not respondIn the next article, we will see different types of events for mouse, keyboard, and page.
