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 相关文章推荐
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 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
php UTF8 文件的签名问题
2009/10/30 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
用于table内容排序
2006/07/21 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
python 监控logcat关键字功能
2020/09/04 Python
python音频处理的示例详解
2020/12/23 Python
如何强制垃圾回收
2015/10/06 面试题
社区服务活动总结
2014/05/07 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
Pygame Event事件模块的详细示例
2021/11/17 Python
vue修饰符.capture和.self的区别
2022/04/22 Vue.js