CODEWITHSUNDEEP
javascripthtml
Siva
Siva

Reputation: 693

Event Delegation - Parent Element Target instead of Child Element

I am trying to use & learn Simple Javascript (no JQuery/other libraries/frameworks).

HTML:

<div id="name">text</div>
<ul id="namelist"><li>A </li><li>B </li><li>C </li></ul>

and I wrote the below code for event delegation for click and it works fine for A,B,C child elements click handling.

JS:

<!--
var mainlist = document.getElementById("namelist");
var namefield=document.getElementById("name");
mainlist.addEventListener('click',function(event) {
    console.log(event.currentTarget.id);
    namefield.innerHTML=event.target.innerHTML;
                  console.log( event.target.innerHTML);});-->

However, when I click the "ul" element instead of child li elements, I see all ABC are printed to div. I don't want any action to take place for ul. Any suggestions ?

Upvotes: 1

Views: 1217

Answers (2)

Birju Shah
Birju Shah

Reputation: 1220

Short Answer

var mainlist = document.getElementById("namelist");
var namefield = document.getElementById("name");
mainlist.addEventListener('click', function(event) {
  if(event.target && event.target.nodeName == "LI") {
        console.log(event.currentTarget.id);
        namefield.innerHTML=event.target.innerHTML;
        console.log( event.target.innerHTML);
    }
});

Long Answer

Your question I feel should be, why the event listener of ul gets fired when I am clicking li.

When you are clicking on li, ul also acts as if it is clicked. It is called event bubbling in javascript and it is by default when you register addEventListener whith no third parameter (defaults to false).

Read more here

I will suggest adding event listener on both the elements and then understand the event delegation model.

Upvotes: 2

Piyush.kapoor
Piyush.kapoor

Reputation: 6803

Just add a check in your click handler

mainlist.addEventListener('click',function(event) {
    if (event.currentTarget != event.target) {
        console.log(event.currentTarget.id);
        namefield.innerHTML=event.target.innerHTML;
        console.log( event.target.innerHTML);
    }

   });

Upvotes: 0

Related Questions