事件委托(又称事件代理)

事件委托
1.什么是事件委托
​ 事件委托，也叫==事件代理== 。指的是子孙元素的事件绑定，完全交给其上级父元素或祖先元素绑定。

2.为什么要用事件委托
​ 在web前端开发中，并不是程序注册事件越多越好， 事件注册越多，就越消耗程序的性能。所以，在事件注册较多的情况下， 为了提高程序的性能，应当适当减少事件的绑定。

​ 传统的事件处理中，需要为每个元素注册事件。事件委托则是一种简单有效的技巧，通过它可以把事件注册到一个父级或父级以上的元素上，从而避免把事件注册到多个子级元素上。

3. 事件委托的原理 【重点】
​ 事件委托的原理用到的就是 目标元素 和 事件冒泡，把事件注册到父元素或父级以上的元素上，等待 子元素事件冒泡，并且在父元素或父级以上的元素注册的事件中能够 通过事件对象.target判断是哪个子元素，从而做相应处理。
​==① 给目标元素的父元素或父级以上的元素注册事件==

​ ==② 在父元素或父级以上元素注册的事件中通过 事件对象.target判断是哪个子元素==

​ ==③ 根据判断做出处理。

4.事件委托的作用
提高程序性能
可以代理新动态添加的元素的事件。
5.代码实现

复制代码
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    p {
      background-color: blue;;
    }
  </style>
</head>
<body>
  <div id="box">
    <h2>标题</h2>
    <p>段落1</p>
    <p>段落2</p>
    <h2>标题</h2>
    <p>段落3</p>
    <h2>标题</h2>
    <p>段落4</p>
    <p>段落5</p>
    <h2>标题</h2>
    <p>段落6</p>
    <p>段落7</p>
    <h2>标题</h2>
  </div>
  <script>
      // 获取div元素
    var divNode = document.getElementById('box');
    divNode.onclick = function(e){
      // 获取最先触发的元素节点
      var node = e.target;
      // 节点对象.tagName  获取节点对象对应的标签名 返回的是大写
      if(node.tagName.toLowerCase()=='p'){
        alert(node.innerHTML);
      }
    }
  </script>
</body>
</html>
复制代码

 

posted @   午亭爱成长  阅读(1163)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示
AI IDE Trae