How the event is handled in DOM?
Suppose that you want to attach an onClick event on a button.
This can be done as follows.
document.getElementById('myButton').onclick = function(){
alert('Hello!');
}
Above is the most common way of attaching events in your DOM element. It has one drawback that only one event handler can be attached to the DOM element.
To overcome this there is a workaround. You can do something like this
let el = document.getElementById('myButton')
and then attach events
el.addEventListener( 'click', function(){
alert('Hello!');
}, false)
Okay, but how does the event move in DOM?
To answer this suppose we have an HTML code something like this
<HTML>
<head></head>
<body>
<div id='myDiv'>
<button id='myButton'>My button</button>
</div>
</body>
</HTML>
When you click on the button element event "drills down" the document through its parent and then makes it way back up.
The initial "drilling down " is called the "Capture Phase" and when it circles around and goes back up to document element it is known as "bubbling phase"
 |
|---|
| Take from Alison Quaglia's Blog |
Event Delegation
Let's say that you have element and with several child elements and let's say that you want to attach an onClick event on every li element.
<ul id='parent'>
<li id='item-1'>item 1</li>
<li id='item-2'>item 2</li>
<li id='item-3'>item 3</li>
<li id='item-4'>item 4</li>
</ul>
But the problem comes when you have to add and remove li elements. Adding and removing event listeners to li element can be difficult. The best way you can do this is by adding an event listener to the parent element (i.e ul). You can do so by:-
document.getElementById("parent").addEventListener("click", (e) => {
if (e.target && e.target.nodeName === "LI") {
// do whatever you want to do with it
}
});
In the above code, we have attached an onClick event listener to the parent element and then we check if the targeted node is LI or not, if it is not it will be ignored else perform the operation that you want to perform.
What this has to do with React 17?
In React 17 the biggest change was in Event delegation. In React 16 all the events were attached at the document level. This has been changed in react 17 all event is attached at root container at which React tree is been rendered
 |
|---|
| Taken from React.org |
Conclusion
Although, these changes won't be noticed by most of the production apps.
In this blog, I wanted to learn more in-depth about how the browser event system works and what is the major change in React 17
More in-depth documentation is there on React.org.
Top comments (0)