JS中事件冒泡和事件捕获介绍


Posted in Javascript onDecember 13, 2016

谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。
事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。
事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。

1、冒泡事件:

事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。通俗来讲就是,就是当设定了多个div的嵌套时;即建立了父子关系,当父div与子div共同加入了onclick事件时,当触发了子div的onclick事件后,子div进行相应的js操作,但是父div的onclick事件同样会被触发。

html:

<div>
 <input type="button" value="测试事件冒泡" />
</div>

js:

var $input = document.getElementsByTagName("input")[0];
   var $div = document.getElementsByTagName("div")[0];
   var $body = document.getElementsByTagName("body")[0];
 
   $input.onclick = function(e){
      this.style.border = "5px solid red"
      var e = e || window.e;
      alert("red")
   }
   $div.onclick = function(e){
      this.style.border = "5px solid green"
      alert("green")
   }
   $body.onclick = function(e){
      this.style.border = "5px solid yellow"
      alert("yellow")
   }

效果:依次弹出”red“,"green","yellow"。这就是事件冒泡:触发button这个元素,却连同父元素绑定的事件一同触发。

2、阻止事件冒泡

如果对input的事件绑定改为:

$input.onclick = function(e){
  this.style.border = "5px solid red"
  var e = e || window.e;
  alert("red")
  e.stopPropagation();
}

这个时候只会弹出”red“,因为阻止了事件冒泡。

3、事件捕获:

从顶层元素到目标元素或者从目标元素到顶层元素,和事件冒泡是一个相反的过程。事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。

$input.addEventListener("click", function(){
  this.style.border = "5px solid red";
  alert("red")
}, true)
$div.addEventListener("click", function(){
  this.style.border = "5px solid green";
  alert("green")
}, true)
$body.addEventListener("click", function(){
  this.style.border = "5px solid yellow";
  alert("yellow")
}, true)

这个时候依次弹出”yellow“,"green","red"。这就是事件的捕获。 

如果把addEventListener方法的第三个参数改成false,则表示只在冒泡的阶段触发,弹出的依次为:”red“,"green","yellow"。这是因为在W3C模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。

程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。

ele.addEventListener('click',doSomething2,true)
true=捕获
false=冒泡

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
js select常用操作控制代码
Mar 16 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
玩转方法:call和apply
May 08 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
vue实现购物车结算功能
Jun 18 Javascript
JavaScript动态生成表格的示例
Nov 02 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 #Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 #Javascript
浅析Jquery操作select
Dec 13 #Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 #Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 #Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 #Javascript
JS实现图片垂直居中显示小结
Dec 13 #Javascript
You might like
PHP自动生成月历代码
2006/10/09 PHP
php购物网站支付paypal使用方法
2010/11/28 PHP
php存储过程调用实例代码
2013/02/03 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
php获取文件大小的方法
2014/02/26 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
Python中字符串对齐方法介绍
2015/05/21 Python
Python编程实现的图片识别功能示例
2017/08/03 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
适用于所有创业者的创业计划书
2014/02/05 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
小学生家长寄语
2014/04/02 职场文书
实习生岗位职责
2014/04/12 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
优秀教师个人材料
2014/12/15 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers