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,实现插入排序实现代码
Jul 31 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 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
PHP网站基础优化方法小结
2008/09/29 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
YII路径的用法总结
2014/07/09 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
一个实用的php验证码类
2017/07/06 PHP
JavaScript面向对象编程
2008/03/02 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
Python线程指南详细介绍
2017/01/05 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
python简单贪吃蛇开发
2019/01/28 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
关键字final的用法
2013/10/02 面试题
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
刑事撤诉申请书
2015/05/18 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
Python实现简单的俄罗斯方块游戏
2021/09/25 Python