Javascript 事件冒泡机制详细介绍


Posted in Javascript onOctober 10, 2016

1. 事件

         在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作。

         浏览器的事件表示的是某些事情发生的信号。事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3school教程 进行了解,这将有助于更好地理解以下的内容 。

2.冒泡机制

            什么是冒泡呢?

         下面这个图片大家应该心领神会吧,气泡从水底开始往上升,由深到浅,升到最上面。在上升的过程中,气泡会经过不同深度层次的水。                       

             Javascript 事件冒泡机制详细介绍

相对应地:这个气泡就相当于我们这里的事件,而水则相当于我们的整个dom树;事件从dom 树的底层 层层往上传递,直至传递到dom的根节点。

简单案例分析

下面通过一个简单的例案例来阐述冒泡原理: 

       定义一个html, 里面有三个简单的dom 元素:div1,div2, span,div2包含span,div1 包含div2;而它们都在body 下:    

<body id="body">
 <div id="box1" class="box1">
 <div id="box2" class="box2">
  <span id="span">This is a span.</span>
 </div>
 </div>
</body>

界面原型如下:

                             Javascript 事件冒泡机制详细介绍

       在这个基础上,我们实现下面的功能:

         a.body添加 click 事件监听,当body捕获到event事件时,打印出事件发生的时间和 触发事件的节点信息:

<script type="text/javascript">
 window.onload = function() {
 document.getElementById("body").addEventListener("click",eventHandler);
 }
 function eventHandler(event) {
 console.log("时间:"+new Date(event.timeStamp)+" 产生事件的节点:" + event.target.id +" 当前节点:"+event.currentTarget.id);
 }
</script>

当我们依次点击"This is span",div2,div1,body后,输出以下信息:

           Javascript 事件冒泡机制详细介绍

分析以上的结果:

              无论是body,body 的子元素div1,还是 div的子元素div2,还有 span, 当这些元素被点击click时,都会产生click事件,并且body都会捕获到,然后调用相应的事件处理函数。就像水中的气泡从底往上冒一样,事件也会往上传递。

             事件传递的示意图如下所示:

           Javascript 事件冒泡机制详细介绍

         一般地,事件在传递过程中会有一些信息,这些是事件的组成部分:事件发生的时间+事件发生的地点+ 事件的类型+事件的当前处理者+其他信息,

      Javascript 事件冒泡机制详细介绍
     

完整的html代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<title>Insert title here</title>
<style type="text/css">
.box1 {
 border: green 40px solid;
 width: 300px;
 height: 300px;
 margin: auto;
}

.box2 {
 border: yellow 40px solid;
 width: 220px;
 height: 220px;
 margin: auto;
}

span {
 position: relative;
 left: 50px;
 top: 50px;
 background-color: rgba(128, 128, 128, 0.22);
}
</style>

<script type="text/javascript">
 window.onload = function() {
 document.getElementById("body").addEventListener("click",eventHandler);
 }
 function eventHandler(event) {
 console.log("时间:"+new Date(event.timeStamp)+" 产生事件的节点:" + event.target.id +" 当前节点:"+event.currentTarget.id);
 }
</script>

</head>
<body id="body">
 <div id="box1" class="box1">
 <div id="box2" class="box2">
  <span id="span">This is a span.</span>
 </div>
 </div>
</body>
</html>

  b.终止事件的冒泡

    我们现在想实现这样的功能,在div1 点击的时候,弹出 "你好,我是最外层div。",点击div2 的时候,弹出 "你好,我是第二层div";点击span 的时候,弹出"您好,我是span。"。

    由此我们会有下面的javascript片段:

<script type="text/javascript">
 window.onload = function() {
 document.getElementById("box1").addEventListener("click",function(event){
  alert("您好,我是最外层div。");
 });
 document.getElementById("box2").addEventListener("click",function(event){
  alert("您好,我是第二层div。");
 });
 document.getElementById("span").addEventListener("click",function(event){
  alert("您好,我是span。");
 });
 }
</script>

     预期上述代码会单击span 的时候,会出来一个弹出框 "您好,我是span。" 是的,确实弹出了这样的对话框:

          Javascript 事件冒泡机制详细介绍

     然而,不仅仅会产生这个对话框,当点击确定后,会依次弹出下列对话框:

           Javascript 事件冒泡机制详细介绍     Javascript 事件冒泡机制详细介绍
  

这显然不是我们想要的! 我们希望的是点谁显示谁的信息而已。为什么会出现上述的情况呢? 原因就在于事件的冒泡,点击span的时候,span 会把产生的事件往上冒泡,作为父节点的div2 和 祖父节点的div1也会收到此事件,于是会做出事件响应,执行响应函数。现在问题是发现了,但是怎么解决呢?

       方法一:我们来考虑一个形象一点的情况:水中的一个气泡正在从底部往上冒,而你现在在水中,不想让这个气泡往上冒,怎么办呢?——把它扎破!没了气泡,自然不会往上冒了。类似地,对某一个节点而言,如果不想它现在处理的事件继续往上冒泡的话,我们可以终止冒泡:

         在相应的处理函数内,加入  event.stopPropagation()   ,终止事件的广播分发,这样事件停留在本节点,不会再往外传播了。修改上述的script片段:

<script type="text/javascript">
 window.onload = function() {
 document.getElementById("box1").addEventListener("click",function(event){
  alert("您好,我是最外层div。");
  event.stopPropagation();
 });
 document.getElementById("box2").addEventListener("click",function(event){
  alert("您好,我是第二层div。");
  event.stopPropagation();
 });
 document.getElementById("span").addEventListener("click",function(event){
  alert("您好,我是span。");
  event.stopPropagation();
 });
 }
</script>

             经过这样一段代码,点击不同元素会有不同的提示,不会出现弹出多个框的情况了。

           方法二:事件包含最初触发事件的节点引用 和 当前处理事件节点的引用,那如果节点只处理自己触发的事件即可,不是自己产生的事件不处理。event.target 引用了产生此event对象的dom 节点,而event.currrentTarget 则引用了当前处理节点,我们可以通过这 两个target 是否相等。

            比如span 点击事件,产生一个event 事件对象,event.target 指向了span元素,span处理此事件时,event.currentTarget 指向的也是span元素,这时判断两者相等,则执行相应的处理函数。而事件传递给 div2 的时候,event.currentTarget变成 div2,这时候判断二者不相等,即事件不是div2 本身产生的,就不作响应处理逻辑。               

<script type="text/javascript">
 window.onload = function() {
 document.getElementById("box1").addEventListener("click",function(event){
  if(event.target == event.currentTarget)
  {
    alert("您好,我是最外层div。");
  }
 });
 document.getElementById("box2").addEventListener("click",function(event){
  if(event.target == event.currentTarget)
  {
  alert("您好,我是第二层div。");
  }
 });
 document.getElementById("span").addEventListener("click",function(event){
  if(event.target == event.currentTarget)
  {
    alert("您好,我是span。");
  
  }
 });
 }
</script>

         比较:

         从事件传递上看:方法一在于取消事件冒泡,即当某些节点取消冒泡后,事件不会再传递;方法二在于不阻止冒泡,过滤需要处理的事件,事件处理后还会继续传递;

         优缺点:

         方法一缺点:为了实现点击特定的元素显示对应的信息,方法一要求每个元素的子元素也必须终止事件的冒泡传递,即跟别的元素功能上强关联,这样的方法会很脆弱。比如,如果span 元素的处理函数没有执行冒泡终止,则事件会传到div2 上,这样会造成div2 的提示信息;

        方法二缺点:方法二为每一个元素都增加了事件监听处理函数,事件的处理逻辑都很相似,即都有判断 if(event.target == event.currentTarget),这样存在了很大的代码冗余,现在是三个元素还好,当有10几个,上百个又该怎么办呢?
还有就是为每一个元素都有处理函数,在一定程度上增加逻辑和代码的复杂度。

        我们再来分析一下方法二:方法二的原理是 元素收到事件后,判断事件是否符合要求,然后做相应的处理,然后事件继续冒泡往上传递;
        既然事件是冒泡传递的,那可不可以让某个父节点统一处理事件,通过判断事件的发生地(即事件产生的节点),然后做出相应的处理呢?答案是可以的,下面通过给body 元素添加事件监听,然后通过判断event.target 然后对不同的target产生不同的行为。

        将方法二的代码重构一下:

<script type="text/javascript">
 window.onload = function() {
 document.getElementById("body").addEventListener("click",eventPerformed);
 }
 function eventPerformed(event) {
 var target = event.target;
 switch (target.id) {
 case "span": 
  alert("您好,我是span。");
  break;
 case "div1":
  alert("您好,我是第二层div。");
  break;
 case "div2":
  alert("您好,我是最外层div。");
  break;
 }
 }
</script>

            结果会是点击不同的元素,只弹出相符合的提示,不会有多余的提示。

           通过以上方式,我们把本来每个元素都要有的处理函数,都交给了其祖父节点body 元素来完成了,也就是说,span,div2,div1 将自己的响应逻辑委托给body,让它来完成相应逻辑,自己不实现相应逻辑,这个模式,就是所谓的事件委托。

          下面是一个示意图:

Javascript 事件冒泡机制详细介绍

     关于事件代理的问题,以后继续探讨。

    感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
Javascript 类型转换方法
Oct 24 Javascript
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
Vue框架之goods组件开发详解
Jan 25 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 #Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 #Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 #Javascript
jQuery继承extend用法详解
Oct 10 #Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 #Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 #Javascript
You might like
在PHP中读取和写入WORD文档的代码
2008/04/09 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
2014年会策划方案
2014/05/11 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
离婚起诉书范本
2015/05/18 职场文书
交通事故起诉书
2015/05/19 职场文书
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL