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对象的property和prototype是这样一种关系
Mar 24 Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
javascript初学者常用技巧
Sep 02 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
react-native android状态栏的实现
Jun 15 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 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
给php新手谈谈我的学习心得
2007/02/25 PHP
php获取参数的几种方法总结
2014/02/18 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
C# Debug和Testing相关面试题
2015/10/25 面试题
父母对孩子的寄语
2014/04/09 职场文书
2014年统计工作总结
2014/11/21 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python