javascript事件捕获机制【深入分析IE和DOM中的事件模型】


Posted in Javascript onDecember 15, 2016

本文实例分析了javascript事件捕获机制。分享给大家供大家参考,具体如下:

1.什么是事件冒泡?

在排序算法中,我们学过冒泡排序法,所谓冒泡就是让底层的东西浮出水面,对于事件冒泡也同样是如此,

下面我们来看一个例子来说明什么是事件冒泡。

<div>
 <button>测试</button>
</div>
<script>
 $("div").bind("click",function(){alert("div")});
 $("button").bind("click",function(){alert("button"});
</script>

当支持事件冒泡时,当我们点击"测试”按钮时,首先会执行的是alert("button"),固名思意:

事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

当div,button,html根元素都有事件时,事件执行的顺序为:

button->div->html

2.什么是事件捕获?

我们再来看事件捕获,相对于事件捕获,处理时间的顺序与事件冒泡截然相反,同样:

<div>
 <button>测试</button>
</div>
<script>
 $("div").bind("click",function(){alert("div")});
 $("button").bind("click",function(){alert("button"});
</script>

执行这段代码,首先会alert("div"),其次会alert("button")。我们明确事件捕获的概念:

事件从最不精确的对象(document 对象)开始触发,然后到最精确。

同样的如果button,div,html元素上都有绑定事件,那么事件的实行顺序为:

html->div->button

3.各个版本的浏览器对事件的处理机制?

(1)在DOM中,即支持事件冒泡,也支持事件捕获,在W3C的标准中,认为任何事件都是从事件捕获出发,找到最终的结点,此后再进行冒泡,会到根结点。

DOM中支持事件绑定的函数为:

addEventListener("事件名",函数,userCapture);

对于userCapture参数,默认为false,支持事件冒泡。
若在userCapture参数,为true时,支持事件捕获。

(2)对于很多浏览器,都支持addEventListener方法,但是IE不支持!

(3) IE中的事件处理机制,IE中只支持事件冒泡,IE中有一个独有的事件绑定方法

attachEvent方法,此方法有两个参数:

attachEvent("事件名","函数名")

4.如何阻止事件的传播?

无论是事件冒泡还是事件捕获都是可以阻止的。

(1)首先在W3C中阻止事件的传播方法为:stopPropagation(),在IE中,通过设置

cancelBubble=true;

(2) 如何阻止事件的默认行为?在W3C标准中,使用preventDefault方法,在IE中通过设置

window.event.returnValue = false;

PS:关于javascript常用事件及相关说明还可参考本站在线工具:

javascript事件与功能说明大全:
http://tools.3water.com/table/javascript_event

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 事件系统
Jul 22 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
jquery获取当前日期的方法
Jan 14 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
vue axios整合使用全攻略
May 24 Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 #Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 #Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 #Javascript
JavaScript实现Fly Bird小游戏
Dec 15 #Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 #Javascript
JS去除重复并统计数量的实现方法
Dec 15 #Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 #Javascript
You might like
PHP5+UTF8多文件上传类
2008/10/17 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
js实现简单的打印表格
2020/01/15 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
python开发中module模块用法实例分析
2015/11/12 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
python conda操作方法
2019/09/11 Python
pygame实现非图片按钮效果
2019/10/29 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
用python发送微信消息
2020/12/21 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
介绍一下write命令
2012/09/24 面试题
法律系毕业生自荐信范文
2014/03/27 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
期中考试复习计划
2015/01/19 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
环保守法证明
2015/06/24 职场文书
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python