javascript - 事件委托(delegate) - 父元素目标而不是子元素

Question

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

HTML:

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

我为点击事件委托(delegate)编写了以下代码，它适用于 A、B、C 子元素点击处理。

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

但是，当我单击“ul”元素而不是子 li 元素时，我看到所有 ABC 都打印到 div。我不想对 ul 采取任何行动。有什么建议吗？

Answer 1

简答

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

长答案

我觉得你的问题应该是，为什么当我点击 li 时 ul 的事件监听器被触发。

当您点击 li 时，ul 也会像被点击一样起作用。它在 javascript 中称为事件冒泡，默认情况下，当您注册没有第三个参数(默认为 false)的 addEventListener 时。

阅读更多 here

我会建议在这两个元素上添加事件监听器，然后理解事件委托(delegate)模型。