An event is a signal that something has happened. Take google’s index for example, if a user clicks “Google Search”, then the page turns to the search results. But! How does browser know the user click the button?
We can add an event listener on the place we click, so when an event happens (“Ex: click”), it triggers the event handler function which also called callback function. The most common browser’s event like mouse (click, over, move), keyboard (keypress, keydown), and form event (submit and focus).
element.addEventListener(“event”, “event handler function”)
We can also assign an Object as a handler, like an example from JavaScript info:
Why do we need a callback function?
We don’t know when the users click a button, so we can’t use an ordinary function. Here is a metaphor that I think can help you understand what callback is. When you go to a restaurant, you tell a clerk that when the meal ok, please ring the meal pager. So, when the pager rings (event), it triggers that you go to pick your meal. It is same as callback function, if event happens, please call the function.
Prevent Default event
preventDefault() is for preventing a default action from happening. Perhaps it is not easy to understand why we need it and when we use it. Let’s take a look an example, when we like to submit a form, we press submit button. However, sometimes, we like to check the form’s value. If the value you like to submit is invalid, the form should not be submitted as the photo shows. So, when you click submit, it does not work normally.
DOM Bubbling and capturing & event delegation
Except adding the listener to elements, we need to know how the event transfer because it is very important to the concept of event delegation.
Let’s start from event delegation first. In a web page, if we have elements handled in a similar way, then instead of adding an event listener on each element, we can put a common listener on their common ancestor. It is not only save time, but performance of your web application. But how? How does browser know which element is clicked? It is about bubbling and capturing.
For example, we like to make a to-do list and each to do item is added with a check button and delete button.
In this case, when we click the check button, the event will bubble from the button we clicked to its parent element, so the nodes on this way know the check button is clicked, same as the delete button. That’s why we need the event delegation to add the event listener to the common ancestor because it can simplify initialization and saves memory.
The whole path of event is as following is check button > button parent node > the common ancestor
If you don’t want the event bubbles up to html, window, you can use stopPropagation(), so that the event does not be processed on the whole process. Also, an element can add multiple event listeners, however, if you don’t want other handlers execute, you can use event.stopImmediatePropagation() to stop other handlers.
Capturing
Generally, the default setting of event is bubbling, and capturing is rarely used in real code. So, normally, it is invisible to us. Event Capturing starts from the top element to the target element.
The event flow has three phases, capturing, target, and bubbling.
Understanding how event works can help you make different function, like if you want that the child does not make a action if click its parent node or like the to do example as mentioned in the article.
If you like this article, please share your comment with me. Thank you.
Reference to Lidemy and JavaScript info
