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 事件对象的实现
Jul 13 Javascript
JS中表单的使用小结
Jan 11 Javascript
js中小数转换整数的方法
Jan 26 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
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下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
php GeoIP的使用教程
2011/03/09 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
在layui中select更改后生效的方法
2019/09/05 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
python实现倒计时的示例
2014/02/14 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
python实现接口并发测试脚本
2019/06/25 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
什么是Rollback Segment
2013/04/22 面试题
业务代表的岗位职责
2013/11/16 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
经典英文广告词
2014/03/18 职场文书
公司新年寄语
2014/04/04 职场文书
服务承诺口号
2014/05/22 职场文书
科学发展观演讲稿
2014/09/11 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
2015年度企业工作总结
2015/05/21 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
MySQL慢查询优化解决问题
2022/03/17 MySQL
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis