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 面向对象编程 万物皆对象
Sep 17 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
vuex实现简易计数器
Oct 27 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 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
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
Angular封装表单控件及思想总结
2019/12/11 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python实现备份目录的方法
2015/08/03 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Django的models模型的具体使用
2019/07/15 Python
Django之腾讯云短信的实现
2020/06/12 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
会计出纳岗位职责
2013/12/25 职场文书
团员个人年度总结
2015/02/26 职场文书
单位推荐信范文
2015/03/27 职场文书
闪闪红星观后感
2015/06/08 职场文书
幼儿园见习总结
2015/06/23 职场文书
运动员加油词
2015/07/18 职场文书
珍爱生命主题班会
2015/08/13 职场文书
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技