事件委托-父元素目标而不是子元素

Question

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

<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.

<!--
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 ?

Answer 1

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.

Answer 2

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);
    }

   });