What is an event?
An event occurs in the browser whenever an element undergo a change in state as a result of user or browser activity. Events are linked to specific elements in the Document Object Model (DOM). For example a user clicking on a button and changing the <body>'s background color.
What is event handling?
Event handling is the process by which JavaScript code responds to events. The event handler in this scenario refers to the code itself. The act of resizing a window when a user clicks a button is an example of event handling. JavaScript contributes to a web page's interface being responsive to events.
Event listeners are another name for event handlers but they're a little different. While event handlers carry out the action in response to the event, event listeners watch for any events.
How does this work?
addEventListener() is a method that registers an event handler in order to define the code that will be run once the button is clicked.
- First, we selected the button using
querySelector()method. - Second, we defined a function called
changeBackgroundthat has 3 random numbers between 0 and 255 assigned to three different variables which then are passed to thergbfunction of thebackgroundColorof the<body>. - Lastly, The changeBackground() function will be called when users click the button by registering an event handler using the addEventListener() function.
Event bubbling & Event Capturing
According to the event bubbling model, an event begins at the element that is the most specific before moving upward toward the element that is the least specific.The event is bubbled up to the window object in modern web browsers.
An event begins at the least specific element in the event capturing model and moves down toward the most specific element.
Event flow
The Event flow has three phases
- Event capturing takes place first, giving the chance to intercept the event.
- Then, the event reaches the target.
- Lastly, event bubbling takes place which then allows a final response to the event.
Event Object
The browser creates an event object, fills it with information, and passes it as an argument to the handler whenever an event occurs. Only within the event handler is the event object accessible.
<button>Click!</button>
let btn = document.querySelector('button');
btn.addEventListener('click', function(event) {
console.log(event.type); //click
});
There are a lot of properties that can be used with the event object. We're going to discuss Two of them.
preventDefault()
Use the preventDefault() method to stop an event from acting by default. For example this method can stop the page from refreshing itself after click the submit button inside a form.
The event continues to bubble up the DOM even after calling the preventDefault() method. And if an event's cancelable property is true, it can be stopped.
stopPropagation()
The propagation of an event through the DOM tree is abruptly stopped by the stopPropagation() method. It does not, however, alter the default behavior of the browser.
Top comments (2)
Hello, would be usefull discuss about removeEventListener. Removing an unused listener is very important for prevent memory leaks, all the resourcers instantiated in an event listeners remains in memory until their destruction with removeEventListener, in a very large projects this can be a problem.
Might also be worth mentioning
stopImmediatePropagation.