事件委托

最新推荐文章于 2024-09-18 14:33:27 发布

生活不易，被迫卖艺

最新推荐文章于 2024-09-18 14:33:27 发布

阅读量173

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_50018442/article/details/141194353

版权

事件委托是javascript注册事件的常用技巧，也称事件代理、事件委派。

简单理解：原本需要注册在子元素的事件委托给父元素，让父元素担当事件监听的职务。

为什么要用事件委托？

如果同时给多个元素注册事件，需要利用循环多次注册事件。
大量的事件监听是比较耗费性能的，如以下代码所示：

<script>
  // 假设页面中有 10000 个 button 元素
  const buttons = document.querySelectorAll('table button');

  for(let i = 0; i <= buttons.length; i++) {
    // 为 10000 个 button 元素添加了事件
    buttons.addEventListener('click', function () {
      // 省略具体执行逻辑...
    })
  }
</script>

事件委托是利用事件流的特性来解决开发需求的技巧

优点：减少注册次数，提高程序性能。
原理：事件委托其实是利用事件冒泡的特点。

给父元素注册事件，当我们触发子元素的时候，就会冒泡到父元素上，就会触发父元素的事件。

利用事件委托如何得到当前点击的元素？

实现：事件对象.target.tagName可以获得真正触发事件的元素。


<body>
  <ul>
    <li>第1个孩子</li>
    <li>第2个孩子</li>
    <li>第3个孩子</li>
    <li>第4个孩子</li>
    <li>第5个孩子</li>
  </ul>
  <script>
    // 需求： 点击每个小li都会有弹窗效果
    // 1. 获取父元素ul
    const ul = document.querySelector('ul')

    // 2. 给ul注册点击事件
    ul.addEventListener('click', function (e) {
      // alert('我会弹窗')
      // 3. 利用事件对象.target 得到目标元素
      // console.log(e.target)
      // e.target.style.color = 'pink'

      // 需求2：点击哪个小li，对应的li变色
      // console.dir(e.target.tagName) 可以得到目标元素的标签名
      if (e.target.tagName === 'LI') {
        e.target.style.color = 'pink'
      }
    })
  </script>