JS事件代理
2016-03-05 15:26
417 查看
原文
在他们的父元素 ul 上代理事件这么写
在父节点上绑定一个事件,来处理子元素的事件
事件捕获阶段
事件目标阶段
事件起泡阶段
事件捕获:当某个元素触发某个事件(如onclick),顶层对象document就会发出一个事件流,随着DOM树的节点向目标元素节点流去,直到到达事件真正发生的目标元素。在这个过程中,事件相应的监听函数是不会被触发的。
事件目标:当到达目标元素之后,执行目标元素该事件相应的处理函数。如果没有绑定监听函数,那就不执行。
事件起泡:从目标元素开始,往顶层元素传播。途中如果有节点绑定了相应的事件处理函数,这些函数都会被一次触发。如果想阻止事件起泡,可以使用e.stopPropagation()(Firefox)或者e.cancelBubble=true(IE)来组织事件的冒泡传播。
javasript delegate
什么是事件代理
为每个 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>
在他们的父元素 ul 上代理事件这么写
// 获取父节点,并为它添加一个click事件 document.getElementById("parent-list").addEventListener("click",function(e) { // 检查事件源e.targe是否为Li if(e.target && e.target.nodeName.toUpperCase == "LI") { // 真正的处理过程在这里 console.log("List item ",e.target.id.replace("post-")," was clicked!"); } });
在父节点上绑定一个事件,来处理子元素的事件
原理:事件冒泡及捕获
DOM2.0模型将事件处理流程分为三个阶段:事件捕获阶段
事件目标阶段
事件起泡阶段
事件捕获:当某个元素触发某个事件(如onclick),顶层对象document就会发出一个事件流,随着DOM树的节点向目标元素节点流去,直到到达事件真正发生的目标元素。在这个过程中,事件相应的监听函数是不会被触发的。
事件目标:当到达目标元素之后,执行目标元素该事件相应的处理函数。如果没有绑定监听函数,那就不执行。
事件起泡:从目标元素开始,往顶层元素传播。途中如果有节点绑定了相应的事件处理函数,这些函数都会被一次触发。如果想阻止事件起泡,可以使用e.stopPropagation()(Firefox)或者e.cancelBubble=true(IE)来组织事件的冒泡传播。
jQuery中的delegate函数
$("#ul-list").delegate("li", "click", function(){ // "$(this)" is the node that was clicked console.log("you clicked a link!",$(this)); });
相关文章推荐
- javascript将毫秒还原为可读时间格式
- javascript之基本包装类型(Boolean,Number,String)基础篇
- 千里码【78】json&xml
- javascript获取指定链接GET参数函数
- Javascript学习笔记:6种实现继承的方式
- javascript获取Iframe父页面函数
- javascript <![CDATA[的web使用简单说明
- JS第六天
- JS 数组扩展函数--求起始项到终止项和
- JavaScript中的类数组对象
- 传智博客 js(三)
- three.js制作一个立体几何体
- javascript 常见方法
- 传智博客 js学习(二)
- coco2d-js cc.loader
- 传智博客 js学习(一)
- js 将json字符串转换为json对象
- js中如何快速获取数组中的最大值最小值
- knockoutjs十二 textInput绑定
- 浅析JSONP-解决Ajax跨域访问问题