首页 > 编程笔记 > JavaScript笔记
阅读:35
JS事件委托(事件代理)
在 JavaScript 中,事件委托(delegate)也称为事件托管或事件代理,就是把目标节点的事件绑定到祖先节点上。这种简单而优雅的事件注册方式是基于事件传播过程中,逐层冒泡总能被祖先节点捕获。
这样做的好处:优化代码,提升运行性能,真正把 HTML 和 JavaScript 分离,也能防止出现在动态添加或删除节点过程中注册的事件丢失的现象。
这样做的好处:优化代码,提升运行性能,真正把 HTML 和 JavaScript 分离,也能防止出现在动态添加或删除节点过程中注册的事件丢失的现象。
示例1
下面示例使用一般方法为列表结构中每个列表项目绑定 click 事件,单击列表项目,将弹出提示对话框,提示当前节点包含的文本信息。但是,当我们为列表框动态添加列表项目之后,新添加的列表项目没有绑定 click 事件,这与我们的愿望相反。<button id="btn">添加列表项目</button> <ul id="list"> <li>列表项目1</li> <li>列表项目2</li> <li>列表项目3</li> </ul> <script> var ul = document.getElementById("list"); var lis = ul.getElementsByTagName("li"); for (var i = 0; i < lis.length; i ++) { lis[i].addEventListener('cluick', function (e) { var e = e || window.event; var target = e.target || e.srcElement; alert(e.target.innerHTML); }, false); } var i = 4; var btn = document.getElementById("btn"); btn.addEventListener("click", function() { var li = document.createElement("li"); li.innerHTML = "项目列表" + i++; ul.appendChild(li); }); </script>
示例2
下面示例借助事件委托技巧,利用事件传播机制,在列表框 ul 元素上绑定 click 事件,当事件传播到父节点 ul 上时,捕获 click 事件,然后在事件处理函数中检测当前事件响应节点类型,如果是 li 元素,则进一步执行下面代码,否则跳出事件处理函数,结束响应。<button id="btn">添加项目列表</button> <ul id="list"> <li>列表项目1</li> <li>列表项目2</li> <li>列表项目3</li> </ul> <script> var ul = document.getElementById("list"); ul.addEventListener('click', function(e) { var e = e || window.event; var target = e.target || e.srcElement; if (e.target && e.target.nodeName.toUpperCase()=="LI") { alert(e.target.innerHTML); } }, false); var i = 4; var btn = document.getElementById("btn"); btn.addEventListener("click", function () { var li = document.createElement("li"); li.innerHTML = "项目列表" + i++; ul.appendChild(li); }); </script>当页面存在大量元素并且每个元素注册了一个或多个事件时,可能会影响性能。访问和修改更过的 DOM 节点时,程序就会更慢;特别是事件连接过程都发生在 load(或 DOMContentReady)事件中时,对任何一个富交互网页来说,这都是一个繁忙的时间段。另外,浏览器需要保存每个事件句柄的记录,也会占用更多内存。
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频