以下测试在非IE浏览器中进行(如Chrome和火狐,因为IE不支持事件捕获)
1.先分析下面代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>浏览器事件机制——阻止事件传播</title> <style> div#divGrandpa3 {padding:40px;background-color:#f00;} div#divFather3 {padding:40px;background-color:#0f0;} div#divSon3 {padding:40px;background-color:#00f;} </style> </head> <body> <div id="divGrandpa3" style="width:300px;height:200px;" onclick = "showGrandpa0();" > I am Grandpa <div id="divFather3" style="width:200px;height:120px;" > I am father <div id="divSon3" style="width:100px;height:40px;" > 点击我 I am son </div> </div> </div> <script> function showSon(e) {alert("I am son");} function showSon0(e) {alert("Dom0: I am son");} function showFather(e) { alert("I am father"); } function showFather0(e) {alert("Dom0: I am father");} function showGrandpa(e) { e.stopPropagation();//在捕获阶段,阻止事件 传播 alert("I am Grandpa"); } function showGrandpa0(e) {alert("Dom0: I am Grandpa");} //3.捕获阶段 和 冒泡阶段 都 执行事件处理函数, 只在非IE浏览器中有效 var grandpa3 = document.getElementById("divGrandpa3"); var father3 = document.getElementById("divFather3"); var son3 = document.getElementById("divSon3"); if(window.addEventListener) { grandpa3.addEventListener("click", showGrandpa, true); father3.addEventListener("click", showFather, true); son3.addEventListener("click", showSon, true); } else if (window.attachEvent) { grandpa2.attachEvent("onclick", showGrandpa); father2.attachEvent("onclick", showFather); son2.attachEvent("onclick", showSon); } </script> </body> </html>
上面代码中三句,分别注册了三个DOM2级别的事件处理函数,
grandpa3.addEventListener("click", showGrandpa, true);
father3.addEventListener("click", showFather, true);
son3.addEventListener("click", showSon, true);
其中,在showGrandpa中调用了
e.stopPropagation();//在捕获阶段,阻止事件 传播,
另外,<div id="divGrandpa3" style="width:300px;height:200px;" onclick = "showGrandpa0();" >
div标签中定义onclick = "showGrandpa0();"属性,定义一个DOM1级别的事件处理函数
这样,根据事件传播顺序:
a.事件捕捉阶段,事件对象沿着document一直传播到发生事件的那个对象(即文档的目标节点,比如id为son的div),这个过程叫事件捕获.
b.事件到达目标节点,如果目标节点指定了事件处理函数,则执行这个函数
当点击 son时,显示 I am Grandpa(事件捕获过程中),然后事件传播终止,调用结束.
当点击grandpa时,先显示 Dom0: I am Grandpa 然后再显示 I am Grandpa
这里不是应该先进行 捕获吗, 应该先执行 grandpa3.addEventListener("click", showGrandpa, true); 注册的函数吗?
2. 分析下面代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>浏览器事件机制——阻止事件传播</title> <style> div#divGrandpa3 {padding:40px;background-color:#f00;} div#divFather3 {padding:40px;background-color:#0f0;} div#divSon3 {padding:40px;background-color:#00f;} </style> </head> <body> <div id="divGrandpa3" style="width:300px;height:200px;" > I am Grandpa <div id="divFather3" style="width:200px;height:120px;" > I am father <div id="divSon3" style="width:100px;height:40px;" > 点击我 I am son </div> </div> </div> <script> function showSon(e) {alert("I am son");} function showSon0(e) {alert("Dom0: I am son");} function showFather(e) { alert("I am father"); } function showFather0(e) {alert("Dom0: I am father");} function showGrandpa(e) { e.stopPropagation();//在捕获阶段,阻止事件 传播 alert("I am Grandpa"); } function showGrandpa0(e) {alert("Dom0: I am Grandpa");} //3.捕获阶段 和 冒泡阶段 都 执行事件处理函数, 只在非IE浏览器中有效 var grandpa3 = document.getElementById("divGrandpa3"); var father3 = document.getElementById("divFather3"); var son3 = document.getElementById("divSon3"); if(window.addEventListener) { grandpa3.addEventListener("click", showGrandpa, true); father3.addEventListener("click", showFather, true); son3.addEventListener("click", showSon, true); grandpa3.onclick=showGrandpa0; } else if (window.attachEvent) { grandpa2.attachEvent("onclick", showGrandpa); father2.attachEvent("onclick", showFather); son2.attachEvent("onclick", showSon); } </script> </body> </html>
上面代码中四句:
grandpa3.addEventListener("click", showGrandpa, true);
father3.addEventListener("click", showFather, true);
son3.addEventListener("click", showSon, true);
grandpa3.onclick=showGrandpa0;
前三句添加了DOM2级别的时间处理程序,
第四句grandpa3.onclick=showGrandpa0;
这个相当于覆盖了上面的onclick = "showGrandpa0();"
即同时在html标签中定义onclick = "showGrandpa0();" 和 在代码中定义 grandpa3.onclick=showGrandpa0;
相当于只在代码中 定义 grandpa3.onclick=showGrandpa0;
但是不仅仅是简单的覆盖,这里执行的顺变得不一样了:
当点击 son时,显示 I am Grandpa(事件捕获过程中),然后事件传播终止,调用结束.
当点击grandpa时,先显示 I am Grandpa 然后再显示 Dom0: I am Grandpa
这又是什么情况?
3. 结论
1.虽然在 showGrandpa()函数中调用了e.stopPropagation();阻止事件传播,
但是使用onclick = "showGrandpa0();"方式注册的事件处理函数,会在事件捕获之前执行?
2. 在代码中使用grandpa3.onclick=showGrandpa0;方式注册的
事件处理函数会在事件到达目标节点时执行(上面情况2中,在点击grandpa时,可看成是在事件传播阻止之前,
事件已经到达目标节点,所以执行了showGrandpa0())?
推测: 在事件传播过程中,当事件到达目标节点后,
使用html标签中类似于onclick="showGrandpa0();"方式注册的事件处理函数先执行,
然后再执行 使用grandpa3.addEventListener("click", showGrandpa, true);方式注册的DOM2事件处理函数
如果在代码中使用,grandpa3.onclick=showGrandpa0;方式注册事件处理函数,
则会覆盖html标签中类似与onclick="showGrandpa0();"方式注册的事件处理函数,
并且 grandpa3.onclick=showGrandpa0;方式注册事件处理函数
会在 grandpa3.addEventListener("click", showGrandpa, true);方式注册的DOM2事件处理函数
执行过了之后再执行.
相关推荐
1、事件冒泡:在javascript事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止。并不是所有的事件都有冒泡现象,比如如下几个:blur事件 ,...
事件冒泡(dubbed bubbling):与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点。 dom标准事件流的触发的先后顺序为:先捕获再冒泡,即当触发dom事件时,会先进行事件捕获,捕获到事件
事件是javascript中的核心内容之一,在对事件的应用中不可避免的要涉及到一个重要的概念,那就是事件冒泡,在介绍事件冒泡之前,先介绍一下另一个重要的概念事件流: 一.什么是事件流: 文档对象模型(DOM)是一个树...
标准浏览器和Ie9+浏览器都支持事件的冒泡和捕获,而IE8-浏览器只支持冒泡 标准和Ie9+浏览器用stopPropagation()或cancelBubble阻止事件传播,而ie8-用e.cancelBubble属性来阻冒泡,注意ie9不支持cancelBubble属性...
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡 事件流描述的是从页面中接收事件的顺序。提出事件流概念的正是IE和Netscape,但是前者提出的是我们常用的事件冒泡流,而后者提出的是事件捕获流。 第一部分:事件冒泡 ...
今日,项目程序出现异常,后发现跟冒泡事件有关,利用此机会探索一下利用Javascript捕获和冒泡事件。 一、要探究捕获和冒泡事件,首先要知道什么是事件的捕获和冒泡,所以呢,先从概念入手; 事件的冒泡:在一个对象...
提出事件流概念的正是IE和Netscape,但是前者提出的是我们常用的事件冒泡流,而后者提出的是事件捕获流。 第一部分:事件冒泡 即事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)。 下面举...
DOM事件流(event flow )存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段,事件冒泡顺序是由内到外进行事件传播,事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个...
IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。以下面的HTML 页面为例: <!DOCTYPE html> <...
虽然精通jquery,但对它的原型javascript却不是很了解,最近在学习javascript中遇到了一些困难,比如冒泡和捕获,很多次被提到,但又不知究竟应用在何处。找到了一些好文章解惑,在这里分享给大家
而早期的IE和Netscape提出了完全相反的事件流概念,IE事件流是事件冒泡,而Netscape的事件流就是事件捕获。 事件流类别 事件冒泡 即从下至上,从目标触发的元素逐级向上传播,直到window对象。 事件捕获 即从上至...
事件流描述的是从页面中接受事件的顺序,但IE和Netscape却提出了完全相反的事件流的概念,IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流。 1) 事件冒泡 事件开始时由最具体的元素(文档中嵌套层次最深的...
IE的事件流是事件冒泡流,而Netscape Communicator的事件流是事件捕获流。 二、事件冒泡 即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点。如: <!DOCTYPE html> <html lang="en"> &...
事件流:分两种,IE的是 事件冒泡流 ,事件开始时从最具体的元素接收,逐级向上传播到较为不具体的节点(Element -> Document)。与之相反的是 Netscape 的 事件捕获流 。 DOM2级事件规定事件流包括三个阶段:事件...
JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件驱动编程模型,当文档、浏览器、元素或与之相关对象...Netscape的事件捕获:不太具体的节点更早接收事件,而最具体的元素最后接收事件,和事件冒泡相
事件流 1.1事件冒泡(IE事件流) □事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播到较为不具体的节点(文档)。 □所有浏览器均支持事件冒泡。...
2.事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 3.事件捕获:最不具体的节点先接收事件,而最具体的节点应该最后接收事件 二、事件处理 1.HTML事件处理:直接添加到HTML结构中 2....
但是IE提出的是冒泡流,而Netscape Communicator提出的是捕获流。 JavaScript事件流 2、事件冒泡(event bubbling) 事件开始由最具体的元素(嵌套层次最深的那个节点)接收,然后逐级向上传播为较不为具体的节点...
其实这篇文章挺早之前就写了,但是由于sf保存...事件流指的是页面中接收事件的顺序,IE,火狐和chrome浏览器都是事件冒泡,所谓是事件冒泡指的是事件最开始由最具体的元素接收,然后逐级向上传播到不具体的节点。而事
事件冒泡:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收; 然后逐级向上传播至最不具体的那个节点(文档); 1-2.事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件; 第2章 事件...