JS传播事件、取消事件默认行为、阻止事件传播详解


Posted in Javascript onAugust 14, 2017

1.事件处理程序的返回值 

      通常情况下,返回值false就是告诉浏览器不要执行这个事件相关的默认操作。例如,表单提交按钮的onclick事件处理程序能通过返回false阻止浏览器提交表单,再如a标签的onclick事件处理程序通过返回false阻止跳转href页面。类似地,如果用户输入不合适的字符,输入域上的onkeypress事件处理程序能通过返回false来过滤键盘输入。 
      事件处理程序的返回值只对通过属性注册的处理程序才有意义。

2.调用顺序

      文档元素或其他对象可以为指定事件类型注册多个事件处理程序。当适当的事件发生时,浏览器必须按照如下规则调用所有的事件处理程序:

通过设置对象属性或HTML属性注册的处理程序一直优先调用。
使用addEventListener()注册的处理程序按照它们的注册顺序调用。
使用attachEvent()注册的处理程序可能按照任何顺序调用,所以代码不应该依赖于调用顺序

3.事件传播

在调用在目标元素上注册的事件处理函数后,大部分事件会“冒泡”到DOM树根。调用目标的父元素的事件处理程序,然后调用在目标的祖父元素上注册的事件处理程序。这会一直到Document对象,最后到达Window对象。

发生在文档元素上的大部分事件都会冒泡,值得注意的例外是focus、blur和scroll事件。文档元素的load事件会冒泡,但它会在Document对象上停止冒泡而不会传播到Window对象。只有当整个文档都加载完毕时才会触发Window对象的load事件。

4.取消事件默认行为、阻止事件传播

      在支持addEventListener()的浏览器中,可以通过调用事件对象的preventDefault()方法取消事件的默认操作。IE9之前的IE中,可以通过设置事件对象的returnValue属性为false达到同样的效果。下面一段代码是结合三种技术取消事件:

function cancelHandler(event){
 var event=event||window.event;//兼容IE
 //取消事件相关的默认行为
 if(event.preventDefault) //标准技术
 event.preventDefault();
 if(event.returnValue) //兼容IE9之前的IE
 event.returnValue=false;
 return false; //用于处理使用对象属性注册的处理程序
}

取消事件相关的默认操作只是事件取消中的一种,我们也能取消事件传播。在支持addEventListener()的浏览器中,可以调用事件对象的stopPropagation()方法以阻止事件的继续传播。如果在同一对象上定义了其他处理程序,剩下的处理程序将依旧被调用,但调用stopPropagation()之后任何其他对象上的事件处理程序将不会被调用。

 IE9之前的IE不支持stopPropagation()方法,而是设置事件对象cancelBubble属性为true来实现阻止事件进一步传播。

好了以上就是小编为大家整理的全部内容啦,希望对大家有所帮助~

Javascript 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
最简单的jQuery程序 入门者学习
Jul 09 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
第九章之路径分页标签与徽章组件
Apr 25 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
bootstrap中的 form表单属性role="form"的作用详解
Jan 20 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 #Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 #Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 #Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 #Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 #Javascript
JS原生数据双向绑定实现代码
Aug 14 #Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 #jQuery
You might like
php表单转换textarea换行符的方法
2010/09/10 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
聊聊python中的循环遍历
2020/09/07 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
建筑公司文秘岗位职责
2013/11/29 职场文书
毕业生自荐书
2013/12/18 职场文书
七年级地理教学反思
2014/01/26 职场文书
年终考核实施方案
2014/05/26 职场文书
化学专业自荐信
2014/05/28 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
初中班主任教育随笔
2015/08/15 职场文书
学习党史心得体会2016
2016/01/23 职场文书