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

事件委托
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 @ 2020-02-28 17:55  午亭爱成长  阅读(1146)  评论(0)  编辑  收藏  举报