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十个最常用的自定义函数(中文版)
Sep 07 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
用React Native制作一个简单的游戏引擎
May 27 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
手机软键盘弹出时影响布局的解决方法
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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
详解Python发送邮件实例
2016/01/10 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
Python气泡提示与标签的实现
2020/04/01 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
使用python实现学生信息管理系统
2021/02/25 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
error和exception有什么区别
2012/10/02 面试题
电信专业应届生自荐信
2013/09/28 职场文书
应届生自我鉴定
2013/12/11 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
职业生涯规划书范文
2014/03/10 职场文书
班训口号大全
2014/06/18 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
2015年科室工作总结
2015/04/10 职场文书
责任书范本大全
2015/05/11 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
mysql创建存储过程及函数详解
2021/12/04 MySQL