强大的js事件委托
来源:互联网 发布:粤语学软件哪个好 编辑:程序博客网 时间:2024/06/11 17:24
什么是事件
可以这样认为,我们在网页中的某个操作就是事件(有的操作对应多个事件),例如:当我们点击一个按钮的时候,就触发了onclick事件
比如onload事件等等
下边是一个简单添加点击事件的例子
element.addEventListener("click", function() { //操作});
addEventListener() 方法用于向指定元素添加事件句柄,使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。含有三个参数,一个是事件名称,另一个是事件执行的函数,最后一个是事件捕获,因为IE不支持此方法所以,IE 中为 attachEvent()
最简单的添加事件的方法是:
element.onclick = function() { // 操作};
事件冒泡和事件捕获
事件冒泡
事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
IE 5.5: div -> body -> document
IE 6.0: div -> body -> html -> document
Mozilla 1.0: div -> body -> html -> document -> window
事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。
事件捕获
事件从最不精确的对象(document 对象)开始触发,然后到最精确,和事件冒泡相反,事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。
事件流
同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。
事件委托
事件委托就是利用冒泡的原理,把事件加到父级上,触发执行效果。用事件委托可以提高性能
使用事件委托技术能让你避免对特定的每个节点添加事件监听器;相反,事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件。
假设我们给ul元素里的li添加事件
<ul id="parent-list"> <li id="post-1">Item 1</li> <li id="post-2">Item 2</li> <li id="post-3">Item 3</li> <li id="post-4">Item 4</li> <li id="post-5">Item 5</li> <li id="post-6">Item 6</li></ul>
当li被点击的时候,我们要精确的知道是哪个li点击的,在不会事件委托的时候我们可能根据每个li的id去获取对象然后绑定事件,然而每当添加新的li的时候,又得重新给添加的绑定事件,显得非常麻烦
下面是事件委托的例子
// 找到父元素,添加监听器... document.getElementById("parent-list").addEventListener("click",function(e) { // e.target是被点击的元素! // 如果被点击的是li元素 if(e.target && e.target.nodeName == "LI") { // 找到目标,输出 console.log("List item ",e.target); }})
我们先获取父元素对象,然后给父元素绑定事件,当事件监听器触发时,检查事件的来源,排除了不是li元素的事件,如果点击的是li元素,则输出此元素的对象,这短短几行代码,比一个个添加事件灵活多了,所以事件委托非常强大,希望大家多多使用。
- 强大的js事件委托
- Js的事件委托
- js的事件委托
- js的事件代理/委托
- JS里的事件委托
- js的事件的代理和委托
- js 事件的冒泡和委托
- tony的js学习笔记--事件委托
- js事件委托的方式绑定
- JS与Jquery的事件委托
- JS与Jquery的事件委托
- JS的事件委托/代理(delegate)
- JS模拟事件委托。。。
- JS事件委托
- js 事件委托
- js 事件委托
- 【javascript】js事件委托
- js中的事件委托
- 语音信号的短时语音能量
- CSS样式
- mysql到pandas记录
- Objective-c协议
- 基于Spring Boot和Spring Cloud实现微服务架构学习(二)-Spring Boot总结
- 强大的js事件委托
- greenDao的最后总结实战
- fork与vfork 的研究
- ThinkPHP 3.2.3 后台模板引入
- Apache Solr入门教程(初学者之旅)
- #include< >和#include""的区别
- WCF学习与实践——基础知识
- jsp+servlet用底层代码实现文件上传下载
- 论线程安全的单例模式