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 相关文章推荐
JS解密入门 最终变量劫持
Jun 25 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
js和as的稳定传值问题解决
Jul 14 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 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
PHP函数utf8转gb2312编码
2006/12/21 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
详解JavaScript函数绑定
2013/08/18 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
vue router demo详解
2017/10/13 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
Python如何实现文本转语音
2016/08/08 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
python分数表示方式和写法
2019/06/26 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
python处理大日志文件
2019/07/23 Python
深入了解Python在HDA中的应用
2019/09/05 Python
python 伯努利分布详解
2020/02/25 Python
Python如何安装第三方模块
2020/05/28 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
python编程的核心知识点总结
2021/02/08 Python
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
Weblogic的布署方式
2013/08/23 面试题
Linux文件操作命令都有哪些
2016/07/23 面试题
办公室主任先进事迹
2014/01/18 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书