如何javascript制作＆＃34;事件授权＆＃34;

Question

我在网上搜索了很长时间。但没用。请帮助或尝试提供一些如何实现这一点的想法。

我想点击＆＃34; li＆＃34;然后警告......

但请点击＆＃34; 2222＆＃34;或＆＃34; 33333＆＃34;，没有警报。

如何使li“点击委派”

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您可以使用jQuery轻松完成。

＆＃13;

＆＃13;

  $(document).ready(function () {

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;