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

我正在尝试使用和学习简单的Javascript（没有JQuery/其他库/框架）

HTML:

文本
A
B
C

我为click的事件委派编写了下面的代码，对于A、B、C子元素click处理，它可以很好地工作

JS:

但是，当我单击“ul”元素而不是子li元素时，我看到所有ABC都打印到div。我不希望ul发生任何操作。

---

有什么建议吗？

简短回答

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

长答案

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

你的问题我觉得应该是，为什么ul的事件监听器在我点击li时被解雇

当您单击li时，ul也会表现为单击它。 在javascript中，它被称为事件冒泡，当您注册addEventListener时，默认情况下不使用第三个参数（默认为false）

阅读更多

---

我建议在这两个元素上添加事件侦听器，然后了解事件委派模型。

只需在单击处理程序中添加一个检查

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

   });

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

   });