事件绑定、事件冒泡与捕获

抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享。

当我们给一个DOM同时绑定两个点击事件,一个用捕获另一个用冒泡,哪一个先执行?

传统的绑定方式

element.onclick = function(e){
// …
};

传统绑定的优点
非常简单和稳定,可以确保它在你使用的不同浏览器中运作一致
处理事件时,this关键字引用的是当前元素,这很有帮组
传统绑定的缺点
传统方法只会在事件冒泡中运行,而非捕获和冒泡
一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数
事件对象参数(e)仅非IE浏览器可用

一、事件绑定
事件绑定又称事件委托,事件代理,可以给同一个div绑定多个事件

JS中绑定事件顺序(事件冒泡与事件捕获区别),js冒泡

在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件。直接看下面实例

<!Doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 *{margin:0;padding: 0;}
 </style>
</head>
<body>
<div id="id1" style="height:400px; border:1px solid #000;">
 <div id="id2" style="height:200px; border:1px solid #000;">
  <div id="id3" style="height:50px; border:1px solid #000;"></div>
 </div>
</div>
</body>
<script type="text/javascript">
 var obj1=document.getElementById('id1'); 
 obj1.addEventListener('click',function(){
  alert('id1');
 },false);
 var obj2=document.getElementById('id2');
 obj2.addEventListener('click',function(){
  alert('id2');
 },true);
 var obj3=document.getElementById('id3');
 obj3.addEventListener('click',function(){
  alert('id3');
 },true);
 /*如果第三个参数为true,则事件在捕获阶段执行,如果第三个参数为false,则事件在冒泡阶段执行*/
</script>
</html>

当点击id3元素时候,执行结果是:id2,id3,id1

解析:因为obj2与obj3绑定的方法在捕获阶段执行,obj1的事件在冒泡阶段执行。

总结

在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段,必须要理解

不过我们可以通过绑定事件时,指定事件执行时间是在冒泡阶段还是捕获阶段。

obj.addEventListener(event,function(){},bool)

bool:false,代表冒泡阶段执行

bool:true,代表捕获阶段执行

JS在默认情况下获取事件后,就开始从根元素开始捕获所有该事件的监听对象,然后在冒泡阶段逐一执行。捕获阶段是在冒泡阶段前面

阻止冒泡

w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true;

阻止默认行为

w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false;

关于JS 事件冒泡和onclick,click,on()事件触发顺序

onclick,click,on()的优先关系:onclick>click>on();

onclick和click绑定的事件,彼此之间遵守事件冒泡规则,从内到外触发;

on()绑定的事件,总是晚于onclick和click绑定的事件触发;

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持帮客之家!

在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),…

(一)事件绑定的几种方式

 

W3C绑定方式

element.addEventListener(‘click’, function(e){
// …
}, false);

W3C绑定的优点
该方法同时支持事件处理的捕获和冒泡阶段。事件阶段取决于addEventListener最后的参数设置:false
(冒泡) 或 true (捕获)。
在事件处理函数内部,this关键字引用当前元素。
事件对象总是可以通过处理函数的第一个参数(e)捕获。
可以为同一个元素绑定你所希望的多个事件,同时并不会覆盖先前绑定的事件
W3C绑定的缺点
IE不支持,你必须使用IE的attachEvent函数替代。

非IE:

javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定、在js代码中绑定。下面的方式1、方式2属于在html中绑定事件,方式3、方式4和方式5属于在js代码中绑定事件,其中方法5是最推荐的做法。

我首先测试了仅有一个DOM时事件的发生顺序,发现事件发生的顺序与代码顺序有直接联系。谁写在前面谁就会先执行,不管是事件捕获还是事件冒泡。

IE绑定事件的方法

element.attachEvent(‘onclick’, function(){
// …
});

IE方式的优点
可以为同一个元素绑定你所希望的多个事件,同时并不会覆盖先前绑定的事件。
IE方式的缺点
IE仅支持事件捕获的冒泡阶段
事件监听函数内的this关键字指向了window对象,而不是当前元素(IE的一个巨大缺点)
事件对象仅存在与window.event参数中
事件必须以ontype的形式命名,比如,onclick而非click
仅IE可用。你必须在非IE浏览器中使用W3C的addEventListener

    element.addEventListener("click",fn,false) 事件绑定
    element.removeEventLisenter("click",fn,false) 解除绑定

方式1:

第二次添加父节点又测试一次,看下面的代码。

兼容写法

// 绑定
/***************************************
element 需要绑定事件的元素
威尼斯官网,type 绑定事件的名称(没有on)
澳门威斯尼人6613·com,fn 要绑定的事件对应的函数
****************************************/
function addEvevt(element,type,fn){
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent(‘on’ + type,fn,);
}else{
element[‘on’ + type]=fn;
}
}
// 解除绑定
/***************************************
element 需要绑定事件的元素
type 绑定事件的名称(没有on)
fn 要绑定的事件对应的函数
****************************************/
function removeEvent(element,type,fn){
if(element.removeEventListener){
element.removeEventListener(type,fn,false);
}else if(element.detachEvent){
element.detachEvent(‘on’ + type,fn,);
}else{
element[‘on’ + type]=null;
}
}

IE:

HTML的DOM元素支持onclick、onblur等以on开头属性,我们可以直接在这些属性值中编写javascript代码。当点击div的时候,下面的代码会弹出div的ID:

HTML

事件的捕获

捕获型事件(event capturing):事件从最不精确的对象(document
对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。
冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。
DOM事件模型最独特的性质是,文本节点也触发事件(在IE中不会)

事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。
事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。

    element.attachEvent("onclick",fn) 事件绑定
    element.detachEvent("onclick",fn) 解除绑定

<div id=”outestA” onclick=”var id =
this.id;alert(id);return false;”></div>

<div class='box' style="width:200px; height:200px; background:lightblue">
    <div class="dv" style="width:100px; height:100px; background:pink"></div>
</div>

W3C模型

W3C模型是将两者进行中和,在W3C模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。
程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。
ele.addEventListener(‘click’,doSomething2,true)
true=捕获
false=冒泡

绑定事件兼容写法:(移除同理)

这种做法很显然不好,因为代码都是放在字符串里的,不能格式化和排版,当代码很多的时候很难看懂。这里有一点值得说明:onclick属性中的this代表的是当前被点击的DOM对象,所以我们可以通过this.id获取DOM元素的id属性值。

威尼斯官网 1

事件的传播是可以阻止的:

• 在W3c中,使用stopPropagation()方法
• 在IE下设置cancelBubble = true;
在捕获的过程中stopPropagation();后,后面的冒泡过程也不会发生了~

function addEvent(element,type,fn){
     if(element.addEventListener){
            element.addEventListener(type,fn,false)
     }else if(element.attachEvent){
            element.attachEvent("on"+type,fn);
     }else{
            target["on"+type]=fn;
     }
}

方式2:

JavaScript

阻止事件的默认行为,例如click <a>后的跳转~

• 在W3c中,使用preventDefault()方法;
• 在IE下设置window.event.returnValue = false;
•return false;

二、js事件捕获和冒泡

当代码比较多的时候,我们可以在onclick等属性中指定函数名。

var dv = document.querySelector('.dv');
var box = document.querySelector('.box');

//父级绑定click事件冒泡
box.addEventListener('click', function(){ console.log('parent bubble') }, false);

//子级绑定click事件冒泡
dv.addEventListener('click', function(){ console.log('child bubble') }, false);
//子级绑定click事件捕获
dv.addEventListener('click', function(){ console.log('child capture') }, true);

//父级绑定click事件捕获
box.addEventListener('click', function(){ console.log('parent capture') }, true);

取消冒泡的兼容写法

/***************************************
ev 取消冒泡事件对象
****************************************/
function stopBubble(e){
if(e && e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}

1.什么是事件冒泡:
事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。(默认的事件处理程序,从子级到父级)

<script>

 function buttonHandler(thisDom)
 {
 alert(this.id);//undefined
 alert(thisDom.id);//outestA
 return false;
 }
</script>
<div id="outestA" onclick="return buttonHandler(this);"></div>

威尼斯官网 2

2.什么是事件捕获:
事件从最不精确的对象(document
对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。(捕获型事件先发生,由父级到子级)

跟上面的做法相比,这种做法略好一些。值得一提的是:事件处理函数中的this代表的是window对象,所以我们在onclick属性值中,通过this将dom对象作为参数传递。

 根据输出结果可以看出事件的执行顺序:

3.事件绑定中的false,true
(1)作用:第3个参数useCapture是一个Boolean值,用来设置事件是在事件捕获时执行,还是事件冒泡时执行
(2)true:事件捕获,父级元素先触发,子级元素后触发,即div先触发,p后触发
(3)false:事件冒泡,子级元素先触发,父级元素后触发,即p先触发,div后触发。

方式3:在JS代码中通过dom元素的onclick等属性

  1. 父级元素的捕获事件 

4.阻止冒泡:
ev.cancelBubble=true;
ev.stopPropagation();

var dom = document.getElementById("outestA");
dom.onclick = function(){alert("1=" + this.id);};
dom.onclick = function(){alert("2=" + this.id);};

  2. 目标元素的顺序事件 无关冒泡/捕获

5.阻止冒泡的兼容写法:

这种做法this代表当前的DOM对象。还有一点:这种做法只能绑定一个事件处理函数,后面的会覆盖前面的。

  3. 父级元素的冒泡事件

function stopBubble(e){
        if(e&&ev.stopPropagation){
              e.stopPropagation();
        }else{
            e.cancelBubble=true;
        }
}

方式4:IE下使用attachEvent/detachEvent函数进行事件绑定和取消。

JS Bin 

attachEvent/detachEvent兼容性不好,IE6~IE11都支持该函数,但是FF和Chrome浏览器都不支持该方法。而且attachEvent/detachEvent不是W3C标准的做法,所以不推荐使用。在IE浏览器下,attachEvent有以下特点。

a) 事件处理函数中this代表的是window对象,不是dom对象。

var dom = document.getElementById("outestA"); 
dom.attachEvent('onclick',a); 

function a() 
{  
  alert(this.id);//undefined 
}

b) 同一个事件处理函数只能绑定一次。

var dom = document.getElementById("outestA"); 
dom.attachEvent('onclick',a); 
dom.attachEvent('onclick',a);  
function a() 
{ 
  alert(this.id);
}

虽然使用attachEvent绑定了2次,但是函数a只会调用一次。

c)不同的函数对象,可以重复绑定,不会覆盖。

var dom = document.getElementById("outestA"); 
dom.attachEvent('onclick',function(){alert(1);}); 
dom.attachEvent('onclick',function(){alert(1);}); // 当outestA的click事件发生时,会弹出2个对话框 

匿名函数和匿名函数是互相不相同的,即使代码完全一样。所以如果我们想用detachEvent取消attachEvent绑定的事件处理函数,那么绑定事件的时候不能使用匿名函数,必须要将事件处事函数单独写成一个函数,否则无法取消。

方式5:使用W3C标准的addEventListener和removeEventListener。

这2个函数是W3C标准规定的,FF和Chrome浏览器都支持,IE6/IE7/IE8都不支持这2个函数。不过从IE9开始就支持了这2个标准的API。

// type:事件类型,不含"on",比如"click"、"mouseover"、"keydown";
// 而attachEvent的事件名称,含含"on",比如"onclick"、"onmouseover"、"onkeydown";
// listener:事件处理函数
// useCapture是事件冒泡,还是事件捕获,默认false,代表事件冒泡类型
addEventListener(type, listener, useCapture); 

a)
事件处理函数中this代表的是dom对象,不是window,这个特性与attachEvent不同。

var dom = document.getElementById("outestA"); 
dom.addEventListener('click', a, false); 

function a() 
{  
  alert(this.id);//outestA 
}

b) 同一个事件处理函数可以绑定2次,一次用于事件捕获,一次用于事件冒泡。

var dom = document.getElementById("outestA"); 
dom.addEventListener('click', a, false); 
dom.addEventListener('click', a, true); 

function a() 
{  
  alert(this.id);//outestA 
}// 当点击outestA的时候,函数a会调用2次

如果绑定的是同一个事件处理函数,并且都是事件冒泡类型或者事件捕获类型,那么只能绑定一次。

var dom = document.getElementById("outestA"); 
dom.addEventListener('click', a, false); 
dom.addEventListener('click', a, false); 

function a() 
{  
  alert(this.id);//outestA 
}

// 当点击outestA的时候,函数a只会调用1次

c) 不同的事件处理函数可以重复绑定,这个特性与attachEvent一致。

(二)事件处理函数的执行顺序

方式1、方式2和方式3都不能实现事件的重复绑定,所以自然也就不存在执行顺序的问题。方式4和方式5可以重复绑定特性,所以需要了解下执行顺序的问题。如果你写出依赖于执行顺序的代码,可以断定你的设计存在问题。所以下面的顺序问题,仅作为兴趣探讨,没有什么实际意义。直接上结论:addEventListener和attachEvent表现一致,如果给同一个事件绑定多个处理函数,先绑定的先执行。下面的代码我在IE11、FF17和Chrome39都测试过。

<script>
 window.onload = function(){
  var outA = document.getElementById("outA"); 
 outA.addEventListener('click',function(){alert(1);},false);
 outA.addEventListener('click',function(){alert(2);},true);
 outA.addEventListener('click',function(){alert(3);},true);
 outA.addEventListener('click',function(){alert(4);},true);
 };
</script>

<body>
 <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
 </div>
</body>

当点击outA的时候,会依次打印出1、2、3、4。这里特别需要注意:我们给outA绑定了多个onclick事件处理函数,也是直接点击outA触发的事件,所以不涉及事件冒泡和事件捕获的问题,即addEventListener的第三个参数在这种场景下,没有什么用处。如果是通过事件冒泡或者是事件捕获触发outA的click事件,那么函数的执行顺序会有变化。

(三) 事件冒泡和事件捕获

事件冒泡和事件捕获很好理解,只不过是对同一件事情的不同看法,只不过这2种看法都很有道理。
我们知道HTML中的元素是可以嵌套的,形成类似于树的层次关系。比如下面的代码:

<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
 <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
 <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div> 
 </div>
</div>

如果点击了最内侧的outC,那么外侧的outB和outC算不算被点击了呢?很显然算,不然就没有必要区分事件冒泡和事件捕获了,这一点各个浏览器厂家也没有什么疑义。假如outA、outB、outC都注册了click类型事件处理函数,当点击outC的时候,触发顺序是A–>B–>C,还是C–>B–>A呢?如果浏览器采用的是事件冒泡,那么触发顺序是C–>B–>A,由内而外,像气泡一样,从水底浮向水面;如果采用的是事件捕获,那么触发顺序是A–>B–>C,从上到下,像石头一样,从水面落入水底。

事件冒泡见下图:

威尼斯官网 3

事件捕获见下图:

威尼斯官网 4

一般来说事件冒泡机制,用的更多一些,所以在IE8以及之前,IE只支持事件冒泡。IE9+/FF/Chrome这2种模型都支持,可以通过addEventListener((type,
listener,
useCapture)的useCapture来设定,useCapture=false代表着事件冒泡,useCapture=true代表着采用事件捕获。

<script>

 window.onload = function(){
 var outA = document.getElementById("outA"); 
 var outB = document.getElementById("outB"); 
 var outC = document.getElementById("outC"); 

 // 使用事件冒泡
 outA.addEventListener('click',function(){alert(1);},false);
 outB.addEventListener('click',function(){alert(2);},false);
 outC.addEventListener('click',function(){alert(3);},false);
 };

</script>

<body>
 <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
 <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
  <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div> 
 </div>
 </div>
</body>

使用的是事件冒泡,当点击outC的时候,打印顺序是3–>2–>1。如果将false改成true使用事件捕获,打印顺序是1–>2–>3。

(四) DOM事件流

DOM事件流我也不知道怎么解释,个人感觉就是事件冒泡和事件捕获的结合体,直接看图吧。

威尼斯官网 5

DOM事件流:将事件分为三个阶段:捕获阶段、目标阶段、冒泡阶段。先调用捕获阶段的处理函数,其次调用目标阶段的处理函数,最后调用冒泡阶段的处理函数。这个过程很类似于Struts2框中的action和Interceptor。当发出一个URL请求的时候,先调用前置拦截器,其次调用action,最后调用后置拦截器。

<script>

 window.onload = function(){
 var outA = document.getElementById("outA"); 
 var outB = document.getElementById("outB"); 
 var outC = document.getElementById("outC"); 

 // 目标(自身触发事件,是冒泡还是捕获无所谓)
 outC.addEventListener('click',function(){alert("target");},true);

 // 事件冒泡
 outA.addEventListener('click',function(){alert("bubble1");},false);
 outB.addEventListener('click',function(){alert("bubble2");},false);

 // 事件捕获
 outA.addEventListener('click',function(){alert("capture1");},true);
 outB.addEventListener('click',function(){alert("capture2");},true); 
 };

</script>

<body>
 <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
 <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
  <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div> 
 </div>
 </div>
</body>

当点击outC的时候,依次打印出capture1–>capture2–>target–>bubble2–>bubble1。到这里是不是可以理解addEventListener(type,handler,useCapture)这个API中第三个参数useCapture的含义呢?useCapture=false意味着:将事件处理函数加入到冒泡阶段,在冒泡阶段会被调用;useCapture=true意味着:将事件处理函数加入到捕获阶段,在捕获阶段会被调用。从DOM事件流模型可以看出,捕获阶段的事件处理函数,一定比冒泡阶段的事件处理函数先执行。

(五) 再谈事件函数执行先后顺序

在DOM事件流中提到过:

// 目标(自身触发事件,是冒泡还是捕获无所谓)
outC.addEventListener(‘click’,function(){alert(“target”);},true);

我们在outC上触发onclick事件(这个是目标对象),如果我们在outC上同时绑定捕获阶段/冒泡阶段事件处理函数会怎么样呢?

<script>

 window.onload = function(){
 var outA = document.getElementById("outA"); 
 var outB = document.getElementById("outB"); 
 var outC = document.getElementById("outC"); 

 // 目标(自身触发事件,是冒泡还是捕获无所谓)
 outC.addEventListener('click',function(){alert("target2");},true);
 outC.addEventListener('click',function(){alert("target1");},true);

 // 事件冒泡
 outA.addEventListener('click',function(){alert("bubble1");},false);
 outB.addEventListener('click',function(){alert("bubble2");},false);

 // 事件捕获
 outA.addEventListener('click',function(){alert("capture1");},true);
 outB.addEventListener('click',function(){alert("capture2");},true);



 };

</script>

<body>
 <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
 <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
  <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div> 
 </div>
 </div>
</body>

点击outC的时候,打印顺序是:capture1–>capture2–>target2–>target1–>bubble2–>bubble1。由于outC是我们触发事件的目标对象,在outC上注册的事件处理函数,属于DOM事件流中的目标阶段。目标阶段函数的执行顺序:先注册的先执行,后注册的后执行。这就是上面我们说的,在目标对象上绑定的函数是采用捕获,还是采用冒泡,都没有什么关系,因为冒泡和捕获只是对父元素上的函数执行顺序有影响,对自己没有什么影响。如果不信,可以将下面的代码放进去验证。

// 目标(自身触发事件,是冒泡还是捕获无所谓)
outC.addEventListener('click',function(){alert("target1");},false);
outC.addEventListener('click',function(){alert("target2");},true);
outC.addEventListener('click',function(){alert("target3");},true);
outC.addEventListener('click',function(){alert("target4");},false);

至此我们可以给出事件函数执行顺序的结论了:捕获阶段的处理函数最先执行,其次是目标阶段的处理函数,最后是冒泡阶段的处理函数。目标阶段的处理函数,先注册的先执行,后注册的后执行。

(六) 阻止事件冒泡和捕获

默认情况下,多个事件处理函数会按照DOM事件流模型中的顺序执行。如果子元素上发生某个事件,不需要执行父元素上注册的事件处理函数,那么我们可以停止捕获和冒泡,避免没有意义的函数调用。前面提到的5种事件绑定方式,都可以实现阻止事件的传播。由于第5种方式,是最推荐的做法。所以我们基于第5种方式,看看如何阻止事件的传播行为。IE8以及以前可以通过
window.event.cancelBubble=true阻止事件的继续传播;IE9+/FF/Chrome通过event.stopPropagation()阻止事件的继续传播。

<script>

 window.onload = function(){
 var outA = document.getElementById("outA"); 
 var outB = document.getElementById("outB"); 
 var outC = document.getElementById("outC"); 

 // 目标
 outC.addEventListener('click',function(event){
  alert("target");
  event.stopPropagation();
 },false);

 // 事件冒泡
 outA.addEventListener('click',function(){alert("bubble");},false);

 // 事件捕获
 outA.addEventListener('click',function(){alert("capture");},true); 

 };

</script>

<body>
 <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
 <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
  <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div> 
 </div>
 </div>
</body>

当点击outC的时候,之后打印出capture–>target,不会打印出bubble。因为当事件传播到outC上的处理函数时,通过stopPropagation阻止了事件的继续传播,所以不会继续传播到冒泡阶段。

最后再看一段更有意思的代码:

<script>

 window.onload = function(){
 var outA = document.getElementById("outA"); 
 var outB = document.getElementById("outB"); 
 var outC = document.getElementById("outC"); 

 // 目标
 outC.addEventListener('click',function(event){alert("target");},false);

 // 事件冒泡
 outA.addEventListener('click',function(){alert("bubble");},false);

 // 事件捕获
 outA.addEventListener('click',function(){alert("capture");event.stopPropagation();},true); 

 };

</script>

<body>
 <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
 <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
  <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div> 
 </div>
 </div>
</body>

执行结果是只打印capture,不会打印target和bubble。神奇吧,我们点击了outC,但是却没有触发outC上的事件处理函数,而是触发了outA上的事件处理函数。原因不做解释,如果你还不明白,可以再读一遍本文章。

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

您可能感兴趣的文章:

  • js之事件冒泡和事件捕获详细介绍
  • js事件冒泡、事件捕获和阻止默认事件详解
  • JS中绑定事件顺序(事件冒泡与事件捕获区别)
  • JS中事件冒泡和事件捕获介绍
  • javascript事件冒泡和事件捕获详解
  • js事件冒泡与事件捕获详解
  • 一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
  • 浅谈javascript中的事件冒泡和事件捕获
  • javascript
    中事件冒泡和事件捕获机制的详解
  • JavaScript事件冒泡与事件捕获实例分析

相关文章