js——事件委托

最新推荐文章于 2024-08-12 22:28:07 发布

一枚前端成长路上的小飞侠

最新推荐文章于 2024-08-12 22:28:07 发布

阅读量390

点赞数 10

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/qq_64536562/article/details/140445860

版权

事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧

(1) 优点:减少注册次数，可以提高程序性能

(2) 原理:事件委托其实是利用事件冒泡的特点。(委托给了父元素)（即自己不注册事件，把对应的事件注册给祖先元素）

> 给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件

> 实现:事件对象.target.tagName 获得真正触发事件的元素

事件冒泡：当一个元素的事件被触发时，同样的事件会在该元素的所有祖先元素中依次被触发。

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <p>不变色</p>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    ul.addEventListener('click', function (e) {
      console.dir(e.target)  //打印对象属性
      // 事件对象.target.tagName找到真正触发的元素
      if (e.target.tagName === 'LI') {
        e.target.style.color = 'red'
      }
    })
  </script>
</body>

事件委托版tab栏切换：

<body>
  <div class="tab">
    <div class="tab-nav">
      <h3>每日特价</h3>
      <ul>
        <li><a class="active" href="javascript:;" data-id="0">精选</a></li>
        <li><a href="javascript:;" data-id="1">美食</a></li>
        <li><a href="javascript:;" data-id="2">百货</a></li>
        <li><a href="javascript:;" data-id="3">个护</a></li>
        <li><a href="javascript:;" data-id="4">预告</a></li>
      </ul>
    </div>
    <div class="tab-content">
      <div class="item active"><img src="./images/tab00.png" alt="" /></div>
      <div class="item"><img src="./images/tab01.png" alt="" /></div>
      <div class="item"><img src="./images/tab02.png" alt="" /></div>
      <div class="item"><img src="./images/tab03.png" alt="" /></div>
      <div class="item"><img src="./images/tab04.png" alt="" /></div>
    </div>
  </div>
  <script>
    const ul = document.querySelector('.tab-nav ul')
    // 第二种方式：先直接获取五个
    const items = document.querySelectorAll('.tab-content .item')
    ul.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        document.querySelector('.tab-nav .active').classList.remove('active')
        e.target.classList.add('active')

        const i = +e.target.dataset.id //因为得到的id是字符串，所以需要隐式转换为数字型
        document.querySelector('.tab-content .active').classList.remove('active')
        // document.querySelector(`.item:nth-child(${i + 1})`).classList.add('active')
        //第二种方式：五选一
        items[i].classList.add('active')
      }
    })

  </script>
</body>

一枚前端成长路上的小飞侠

关注

10
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js——事件委托

实现:事件对象.target.tagName 获得真正触发事件的元素。(委托给了父元素)（即自己不注册事件，把对应的事件注册给祖先元素）事件委托是利用事件流的特征解决一些开发需求的知识技巧。(1) 优点:减少注册次数，可以提高程序性能。(2) 原理:事件委托其实是利用。
复制链接

扫一扫