Web API事件委托应用_webapi如何创建一个事件委托-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_61476408/article/details/134745640

本文介绍了事件委托在JavaScript中的应用，通过利用事件冒泡减少注册事件次数，优化性能，同时强调了其在简化代码、处理动态元素及兼容性上的优势和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

事件委托

事件委托

什么是事件委托

优点

减少注册次数，提高程序性能

原理

事件委托利用事件冒泡特点：
当我们给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事
件

事件委托测试

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>第1个孩子</li>
    <li>第2个孩子</li>
    <li>第3个孩子</li>
    <li>第4个孩子</li>
    <li>第5个孩子</li>
    <p>我不需要变色</p>
  </ul>
  <script>
    //点击每个小li 当前li文字变为红色
    //按照事件委托的方式 委托给父级 事件写到父级身上
    const ul=document.querySelector('ul')
    const sign = window.prompt("请输入想要变色的部分li或p");
    ul.addEventListener('click',function(e){
      //alert('点击li,但是li没有点击事件,会冒泡到ul上')
      //this.style.color='red'//this指的是ul
      //console.log(e.target);//就是点击的那个对象
      //e.target.style.color='red'//p不需要变色，但是点击p后仍然会变色
      //console.dir(e.target)//通过在控制台打印出对象的属性列表
      //但是tagName不同，所以根据tagName的不同选择
    if(sign==='li'){
      if(e.target.tagName==='LI'){
        //现在只有需要的变颜色的li才会变色 ， 而p不会变色
        e.target.style.color='red'
      }
    }
    else{
      if(e.target.tagName==='P'){
        //现在只有需要的变颜色的p才会变色 ， 而li不会变色
        e.target.style.color='red'
      }
    }
    })  
    </script>
</body>
</html>

效果

输入li：

在这里插入图片描述
输入p：

在这里插入图片描述

Tab栏切换-事件委托版（原京东）

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>tab栏切换</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .tab {
      width: 590px;
      height: 340px;
      margin: 20px;
      border: 1px solid #e4e4e4;
    }

    .tab-nav {
      width: 100%;
      height: 60px;
      line-height: 60px;
      display: flex;
      justify-content: space-between;
    }

    .tab-nav h3 {
      font-size: 24px;
      font-weight: normal;
      margin-left: 20px;
    }

    .tab-nav ul {
      list-style: none;
      display: flex;
      justify-content: flex-end;
    }

    .tab-nav ul li {
      margin: 0 20px;
      font-size: 14px;
    }

    .tab-nav ul li a {
      text-decoration: none;
      border-bottom: 2px solid transparent;
      color: #333;
    }

    .tab-nav ul li a.active {
      border-color: #e1251b;
      color: #e1251b;
    }

    .tab-content {
      padding: 0 16px;
    }

    .tab-content .item {
      display: none;
    }

    .tab-content .item.active {
      display: block;
    }
  </style>
</head>

<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>
    // 采取事件委托的形式 tab栏切换
    // 1. 获取 ul 父元素 因为 ul只有一个
    const ul = document.querySelector('.tab-nav ul')
    // 获取 5个 item 
    const items = document.querySelectorAll('.tab-content .item')
    // 2. 添加事件
    ul.addEventListener('click', function (e) {
      // console.log(e.target)  // e.target是我们点击的对象
      // 我们只有点击了 a 才会 进行 添加类和删除类操作 
      // console.log(e.target.tagName)  // e.target.tagName 点击那个对象的 标签名
      if (e.target.tagName === 'A') {
        // console.log('我选的是a')
        // 排他思想 ，先移除原来的active  
        document.querySelector('.tab-nav .active').classList.remove('active')
        //当前元素添加 active  是 e.target
        // this 指向ul 不能用this 
        e.target.classList.add('active')

        // 下面大盒子模块
        // console.log(e.target.dataset.id)
        const i = +e.target.dataset.id
        // 排他思想 ，先移除原来的active 
        document.querySelector('.tab-content .active').classList.remove('active')
        // 对应的大盒子 添加 active 
        // document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
        items[i].classList.add('active')
      }
    })
  </script>
</body>

</html>

效果

在这里插入图片描述

素材

在这里插入图片描述

总结和反思

JavaScript中的事件委托是一种常见的编程技术，它可以让我们利用事件冒泡的机制来更高效地管理和处理大量相似元素的事件。通过将事件处理程序绑定到这些元素的共同父元素上，我们可以避免为每个子元素都添加事件处理程序，从而减少了内存占用和提高了性能。
在进行事件委托实验后，以下是一些总结和反思的重点：

性能优势：通过事件委托，我们可以大大减少页面中所需的事件处理程序数量，从而降低了内存占用和提高了页面的响应速度。这种优势在处理大量相似元素时尤为明显。
简化代码：事件委托可以使我们的代码更简洁、更易于维护。不再需要为每个子元素分别添加事件处理程序，而是统一将事件处理程序绑定到父元素，这样可以减少重复代码并提高代码的可读性。
动态元素处理：事件委托还使得对动态添加的元素更为灵活。新添加的元素无需单独再次绑定事件处理程序，因为它们会继承父元素的事件处理逻辑。
注意事项：需要注意的是，事件委托可能会导致事件处理函数在不同的子元素上被触发，我们需要在事件处理函数中谨慎地判断事件的来源元素，以确保处理逻辑的准确性。
兼容性考虑：在使用事件委托时，需要考虑不同浏览器对事件冒泡机制的支持情况，以及不同版本的浏览器对事件处理的差异。通常需要进行兼容性测试和处理。

总的来说，事件委托是一种强大的技木，可以带来性能和代码简化的优势。但需要积极考虑潜在的兼容性问题，并在实际应用中根据场景和需求权衡使用。