美文网首页
使用原生 JS 实现事件委托

使用原生 JS 实现事件委托

作者: shadow123 | 来源:发表于2017-06-17 13:04 被阅读0次

    事件委托是什么

    把若干个节点上的相同事件的处理函数event listener绑定到它的父节点上去, 在父节点上统一处理,减轻对event listener的管理负担。

    为什么要有事件委托

    1.监听还不存在的元素或者已经存在的元素
    2.减少监听器的个数

    如何做到事件委托

    <body>
      <button id="xxx">取号</button>
      <ul>
        <li>
          <ol id="yyy"></ol>
        </li>
      </ul>
      <script>
        let button = document.querySelector("#xxx");
        let yyy = document.querySelector('#yyy');
        button.addEventListener('click',function(){
          let number = parseInt(Math.random() * 100, 10);
          let li = document.createElement('li');
          let span = document.createElement('span');
          span.textContent = number;
          li.appendChild(span);
          yyy.appendChild(li);
        });
        yyy.addEventListener('click',function(e){
          let element = e.target;
          while(element.tagName !== "LI"){
            if(element === yyy){
              element = null;
              break;
            }
            element = element.parentNode;
          }
          element && element.remove()
        })
      </script>
    </body>
    

    用户先点击取号,再点击li元素或者span元素时,就执行ol元素的监听事件,把点击的li元素或span元素删除,不用监听每个元素,监听它们的父元素即可。

    相关文章

      网友评论

          本文标题:使用原生 JS 实现事件委托

          本文链接:https://www.haomeiwen.com/subject/tinvqxtx.html