{"id":3468,"date":"2018-04-19T10:00:31","date_gmt":"2018-04-19T04:30:31","guid":{"rendered":"https:\/\/code4developers.com\/?p=3468"},"modified":"2018-05-09T11:32:49","modified_gmt":"2018-05-09T06:02:49","slug":"event-delegation-javascript","status":"publish","type":"post","link":"https:\/\/code4developers.com\/event-delegation-javascript\/","title":{"rendered":"Event Delegation in JavaScript"},"content":{"rendered":"

Event delegation is a pattern of adding an event listener to a parent node instead, of adding an event listener to the individual node. The added event listener will check for the bubbled event to find matching child element. In this article we will talk about how to implement an event listener using very trending method in JavaScript i.e., event delegation pattern.<\/p>\n

<\/p>\n

Let us consider an example where we have \u2018ul\u2019 which contains multiple \u2018li\u2019 of animals.<\/p>\n

<ul id='animals'>\r\n    <li id='animal1'>Lion<\/li>\r\n    <li id='animal2'>Tiger<\/li>\r\n    <li id='animal3'>Jaguar<\/li>\r\n    <li id='animal4'>Leopard<\/li>\r\n    <li id='animal5'>Cheetah<\/li>\r\n<\/ul><\/pre>\n
 <\/p>\n
Now, here we want to perform an action when we click on the animal (li). As a developer first thing we do is adding an event listener to each \u2018li\u2019 and perform whatever action needs to be performed as below.<\/p>\n
document.getElementById('animal1').addEventListener('click',function(){\r\n  console.log('animal1');\r\n});<\/pre>\n
There is nothing wrong with above method, it will work awesome but but but<\/b>\u2026. What if list is dynamic, and we need to add or remove some of the animals from the list?<\/p>\n
We will do it, and we will also add and remove the list values and their associates event listener. But adding hundreds of event listeners is really a bad idea. This way of adding an event listener will also cause a memory leakage issue and will degrade the performance of your code.<\/p>\n
What\u2019s the Solution?<\/h4>\n
Solution is simple, add an event listener to the parent \u2018ul\u2019. But after adding a listener to the \u2018ul\u2019 how to find which \u2018li\u2019 is clicked?<\/p>\n
Again, answer is simple: When event is bubbled up to the \u2018ul\u2019 element, you can check the target property of your object and it will help you to get which \u2018li\u2019 is clicked from the list. If you want to read more about event bubbling and capturing than do visit my previous article here at: https:\/\/code4developers.com\/event-capturing-bubbling-javascript\/<\/a><\/p>\n
Please consider below code to achieve what we have talked so far.<\/p>\n
document.getElementById(\"animals\").addEventListener(\"click\", function(e) {\r\n  if(e.target && e.target.nodeName == \"LI\") {\r\n  console.log(e.target.innerText);\r\n }\r\n});<\/pre>\n
In above code we are adding event listener to parent element \u2018ui\u2019. When the event will be fired we will check the clicked element is \u2018LI\u2019 which we can check using \u2018e.target.nodeName<\/b>\u2019. If it is \u2018LI\u2019 we are done.<\/p>\n
Summary<\/h4>\n
Most of the developers uses JavaScript library and frameworks like JQuery, AngularJs for their DOM element and event handling. I recommend all of you to use event delegation methods your library or framework is providing. They provide advanced delegation and element identification.<\/p>\n
What to read next…<\/h3>\n