事件委托(又称事件代理)
事件委托
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>
前端菜鸟一枚,如有错误之处,烦请指出,与大家共同进步!