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 面向对象全新理练之数据的封装
Dec 03 Javascript
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
JavaScript中return用法示例
Nov 29 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
js实现登录时记住密码的方法分析
Apr 05 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
node.js文件的复制、创建文件夹等相关操作
Feb 05 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 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
php实现通过ftp上传文件
2015/06/19 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
python中使用mysql数据库详细介绍
2015/03/27 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
日语专业毕业生自荐信
2013/11/11 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
付款委托书范本
2014/10/05 职场文书
2019大学生实习报告
2019/06/21 职场文书
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL