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 相关文章推荐
利用javascript查看html源文件
Nov 08 Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
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
基于文本的留言簿
2006/10/09 PHP
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
python使用turtle库与random库绘制雪花
2018/06/22 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
2014年工商所工作总结
2014/12/09 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
董事会决议范本
2015/07/01 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
Python学习之os包使用教程详解
2022/03/21 Python