今天要跟大家谈的是事件冒泡,这个事件呢,也是两面性的,有时候给我们带来bug,有时候优点也很明显。我们就一起来看看它的真面目。

 首先看看事件冒泡是什么?

事件冒泡 :当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级,一直到window 。(注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数,就算传递了事件 也不会有什么表现 但事件确实传递了。)

只看这句话,或许不是那么好理解,下面来看个栗子:

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div2.onclick = function(){alert(1);};
div1.onclick = function(){alert(2);};//父亲
//html代码 <div id="div1"> <div id="div2"></div>
</div>

代码很简单,就是两个父子关系的div,然后分别加了点击事件,当我们在div2里面点击的时候,会发现弹出了一次1,接着又弹出了2,这说明点击的时候,不仅div2的事件被触发了,它的父级的点击事件也触发了,这种现象就叫做冒泡。点击了div1,自己父级的点击事件也会被触发。

再看个栗子

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2") div1.onclick = function(){alert(2);}; // 父亲
//html代码 <div id="div1"> <div id="div2"></div> </div>

大家可以看一下效果图,相比于第一个例子,代码已经把儿子的点击事件去掉,只留下了父级的,测试的结果是当只点击了儿子,会弹出2,由此证明了当点击了儿子,父亲的点击事件被触发,执行了自己绑定的函数。由于一些人会以为显示出来儿子在父亲里面的时候,自然点了儿子相当于点了父亲,所以这个例子我故意把两个盒子绝对定位在了两个不同的位置,所以点击事件给页面显示出来的位置是没关系的,而是跟html代码中的位置有关系。

可能有人会有疑惑下面这种情况,为啥没有弹出两次:


var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div2.onclick = function(){alert(1);};
div1.onclick = function(){}; //父亲 //html代码 <div id="div1"> <div id="div2"></div> </div>

这里我们要注意,我们传递的仅仅是事件触发,也就是说当点击div2仅仅触发了父级的点击事件,并没有把自己的绑定的函数给父级,父级的执行情况,取决于自己所绑定的函数,因为在这里它绑定的函数是空,自然没什么表现。有些人在这里有误解,所以强调一下。

以上大概就是冒泡的形式了,而大多数时候,冒泡也带来了一些困扰,下面我们看一个栗子:

我们的需求是点击上面红色的面板让下面粉色的面板显示,点击其他地方再让粉丝面板隐藏。于是我们会这样写js代码:

<script>
var div2 = document.getElementById("div2");
var div1 = document.getElementById("div1"); div2.onclick = function(){ //红色面板事件
div1.style.display = "block";
};
document.onclick = function(){
div1.style.display = "none";
}
</script>

这个时候我们测试发现,怎么点击红色面板,粉丝面板都不会显示了,为什么呢?就是冒泡的原因,我们来分析下代码,当点击div2的时候,他会触发父亲级别的点击事件,然后一层一层的往上传,所以document的点击事件自然也被触发了,然后执行了自己身上的绑定事件,让粉色面板消失。所以当你点击div2的时候首先,让粉丝面板显示,只是事件执行太快了,很快又执行了document的点击事件,让面板隐藏。 有兴趣的可以再两个事件之间加一个弹出,就可以测试。

那么这个时候我们肯定不希望有冒泡了,所以解决办法就是取消冒泡了:(后来补充)

取消事件冒泡有两种方式:

标准的W3C 方式:e.stopPropagation();这里的stopPropagation是标准的事件对象的一个方法,调用即可

非标准的IE方式:ev.cancelBubble=true;  这里的cancelBubble是 IE事件对象的属性,设为true就可以了

通常我们会封装这样一个函数:

function stopBubble(e) {
//如果提供了事件对象,则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}

这个时候需要用到事件对象里的 cancelBubble属性,把它设为true即可,ev.cancelBubble=true;所以改进后的代码如下:<script>

var div2 = document.getElementById("div2");
var div1 = document.getElementById("div1");
div2.onclick = function(ev){ // 红色面板加事件
div1.style.display = "block";
stopBubble(ev);//这样就不会再冒泡给父级了
};
document.onclick = function(){
div1.style.display = "none";
}
function stopBubble(e) {
//如果提供了事件对象,则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}

 其实冒泡还有一大优点,就是事件委托,而且经常用到,还能提高很大的性能,想要了解,看下篇博客喽,我们沐晴,下回不见不散。

浅谈JS事件冒泡的更多相关文章

  1. 浅谈js冒泡事件1

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...

  2. 浅谈JS之AJAX

    0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...

  3. 浅谈js拖拽

    本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...

  4. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

  5. 什么是JS事件冒泡?

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...

  6. js事件冒泡和事件委托

    js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...

  7. 浅谈JS中的闭包

    浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...

  8. 什么是JS事件冒泡

    什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...

  9. 阻止JS事件冒泡传递(cancelBubble 、stopPropagation)

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

随机推荐

  1. 金融IC卡 ARQC和ARPC计算方法和实例(转)

    假设发卡行的IC卡应用密钥如下:   PBOC_IMK_AC               F0C34A8124CEE0A91A0B034AA97D6EAC PBOC_IMK_ENC           ...

  2. 新人学习Android开发遇到的小问题总结

    1. IDE搭建: 搭建android的IDE时,先注意是什么版本的系统,64/32位系统. 通常使用的是Eclipse for android,Android Studio由于还需要FQ,网速慢,所 ...

  3. Oracle Study Note : Users and Basic Security

    1. view the default user account SQL> select username from dba_users; 2. lock all users and set t ...

  4. C# 获取windows特殊路径

    虽然是古老的问题,最近用到这个,查一下还不少东东呐 一.使用Environment.SpecialFolder 该方法最简单,直接使用即可,只是提供的特殊路径比较少. (1)使用方法:string p ...

  5. Linux 下五个顶级的开源命令行 Shell

    这个世界上有两种 Linux 用户:敢于冒险的和态度谨慎的. 其中一类用户总是本能的去尝试任何能够戳中其痛点的新选择.他们尝试过不计其数的窗口管理器.系统发行版和几乎所有能找到的桌面插件. 另一类用户 ...

  6. def语句常见错误

    自觉不才,使用def语句时容易出现以下错误, 参考: 习题—25 http://www.2cto.com/shouce/Pythonbbf/ex25.html def add(): print &qu ...

  7. Oracle新建用户赋只读某几张表的权限

    create user JSETI_WZQ identified by abcdef; -- 假设abcdef是密码 grant connect,resource to JSETI_WZQ; gran ...

  8. 通过指令码来判断Java代码的执行顺序(++问题与return和finally的问题)

    问题 在<深入理解Java虚拟机>一书中遇到了如下代码: public int method() { int i; try { i = 1; return i; } catch (Exce ...

  9. js break和continue

    break的兩種形式: break:未加標籤,適用於switch和循環結構 break labelname:適用於任何代碼塊: continue的兩種形式: continue:適用於循環結構 cont ...

  10. Spring Log4j2 log4j2.xml

    <dependency> <groupId>org.apache.logging.log4j</groupId> <artifactId>log4j-c ...