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查看html源文件
Nov 08 Javascript
Prototype 学习 工具函数学习($方法)
Jul 12 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
Vue制作Todo List网页
Apr 26 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
js实现简单点赞操作
Mar 17 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
PHP4之真OO
2006/10/09 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
php数据序列化测试实例详解
2017/08/12 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
获取body标签的两种方法
2011/10/13 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
Python threading多线程编程实例
2014/09/18 Python
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
pandas的相关系数与协方差实例
2019/12/27 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
办公室综合文员岗位职责范本
2014/02/13 职场文书
公司总经理任命书
2014/06/05 职场文书
学校教代会开幕词
2016/03/04 职场文书
python 命令行传参方法总结
2021/05/25 Python
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js