事件冒泡、事件捕获、事件委托初探
2016-04-12 14:08
197 查看
针对这两种情况,W3C在定义dom事件模型的时候,采取了一个折中的方法。在W3C事件模型中,事件的传播顺序应该从事件捕获阶段为始到事件冒泡阶段结束为终。
原生js实现方式
element.addEventListener("事件类型",“事件处理函数”,“事件顺序”)
事件顺序=true
事件处理函数在捕获阶段执行
事件顺序=false
事件处理函数在冒泡阶段执行
事件委托
什么是事件委托?利用事件冒泡或者事件捕获原理,如果点击div1,div1自身不处理事件,而是将处理任务委托给父级元素或者祖先元素甚至根节点元素来处理。
<divid="divItem">
<divclass="div1">
div1
</div>
<divclass="div2">
div2
</div>
<divclass="div3">
div3
</div>
</div>
$("#divItem").delegate('div','click',function(e){
alert($(this).attr('class'))
})
||/\ -----------------||--||----------------- |div1||||| |-------------||--||-----------| ||div2\/|||| |--------------------------------| |W3C事件模型| ------------------------------------------
原生js实现方式
element.addEventListener("事件类型",“事件处理函数”,“事件顺序”)
事件顺序=true
事件处理函数在捕获阶段执行
事件顺序=false
事件处理函数在冒泡阶段执行
事件委托
什么是事件委托?利用事件冒泡或者事件捕获原理,如果点击div1,div1自身不处理事件,而是将处理任务委托给父级元素或者祖先元素甚至根节点元素来处理。
相关文章推荐
- 剑指offer面试题 求从1到n整数中1出现的次数
- 208. Implement Trie (Prefix Tree)
- 使用 XStream 实现 Java 对象与 XML 的相互转换
- POJ 2676(DFS)
- Jquery Autocomplete 实例教程
- Lync规划工具的使用
- MFC框架各部分指针获取方式
- rangeOfString
- 模块化的意义
- 【js】Ajax提交form表单(ajaxSubmit使用讲解 )
- IDEA的查询引用、调用关系图的功能
- 行内元素和块计元素需要注意的地方
- python脚本实例002- 利用requests库实现应用登录
- 【自动化接口测试】FitNesse使用启蒙篇
- C++第三次实验—友元类
- 安卓开源库
- 在eclipse中图形化添加maven项目jar包
- Windows Server 2012 R2 安装Lync Server 2013
- spring 注解
- 进程间通信(IPC)之――――管道