JS事件代理
来源:互联网 发布:linux 挂起 编辑:程序博客网 时间:2024/06/06 01:13
原文
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));});
0 0
- js--事件--事件代理
- js--事件--事件代理
- js代理模式-代理事件
- js事件代理
- JS事件代理
- JS中的事件代理
- js事件代理
- JS事件代理
- js-事件代理
- js事件代理
- js事件委托/代理
- JS事件代理
- js事件代理
- js事件委托(事件代理)
- js 事件委托(事件代理)
- 原生js 事件代理方法
- js的事件代理/委托
- JS的事件冒泡以及事件代理
- Android设置透明、半透明等效果
- Android 之Fragment
- 9、Hadoop的I/O
- 以cochrane抓取recipe为例,谈谈recursions参数的作用
- 学习设计模式 (二)(总结)
- JS事件代理
- APICloud 的版本更新怎么用,云修复怎么用?
- 音频播放
- 【机器学习算法】之logistic回归
- 一步一步在Windows下搭建React Native Android开发环境
- 【翻译+原创】DeepFace: Closing the Gap to Human-Level Performance in Face Verification 论文笔记
- koa2快速搭建api服务器-创建路由及定义GET和POST请求
- 记录一些开源项目
- java静态块的执行顺序