javascript - 如何使用 javascript make "event delegation"

Question

我在网上找了好久。但没有用。请帮助或尝试给出一些如何实现这一目标的想法。

我想点击“li”，然后提醒某事。

但点击“2222”或“33333”，没有任何提醒。

如何让li“点击委托(delegate)”

document.body.addEventListener("click", function(e) {
  if (e.target && e.target.nodeName.toUpperCase() == "LI") {
    alert('click');
  }
}, false);

<ul>
  <li>11111111</li>
  <li><span>2222222222</span></li>
  <li><span>3333333333</span></li>
  <li>444444444</li>
</ul>

Answer 1

您可以使用.parentNode循环当前目标的所有父元素。

  document.body.addEventListener("click", function(e) {

  if (e.target) {
    var a = e.target;
    while (a) {
       if( a.nodeName.toUpperCase() == "LI")
       {
           alert('click');
           break;
       }
       a = a.parentNode;
    }
  }
}, false);

<ul>
  <li>11111111</li>
  <li><span>2222222222</span></li>
  <li><span><b>3333333333</b></span></li>
  <li>444444444</li>
</ul>

使用 jQuery 可以更轻松地完成任务。

  $(document).ready(function () {

    $("li").click(
        function () {
            alert();
        }            
    );
});

<ul>
  <li>11111111</li>
  <li><span>2222222222</span></li>
  <li><span><b>3333333333</b></span></li>
  <li>444444444</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>