事件委托(又称事件代理)
Posted wtsx-2019
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件委托(又称事件代理)相关的知识，希望对你有一定的参考价值。
事件委托
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>
以上是关于事件委托(又称事件代理)的主要内容，如果未能解决你的问题，请参考以下文章