DEV Community

Avinash
Avinash

Posted on

Working of event systems in DOM and React

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!');
}
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

and then attach events

el.addEventListener( 'click', function(){
     alert('Hello!');
}, false)
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
    
    
    Enter fullscreen mode Exit fullscreen mode

    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
      }
    });
    
    Enter fullscreen mode Exit fullscreen mode

    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.

  • Discussion (0)