你的位置:首页 > 软件开发 > Java > 生动详细解释javascript的冒泡和捕获,包懂包会(转)

生动详细解释javascript的冒泡和捕获,包懂包会(转)

发布时间:2015-08-19 16:00:08
前言:虽然精通jquery,但对它的原型javascript却不是很了解,最近在学习javascript中遇到了一些困难,比如冒泡和捕获,很多次被提到,但又不知究竟应用在何处。找到了一些好文章解惑,在这里分享给大家。quirksmode的一系列文章都不错,通俗易懂,这篇只是一系列 ...

前言:虽然精通jquery,但对它的原型javascript却不是很了解,最近在学习javascript中遇到了一些困难,比如冒泡和捕获,很多次被提到,但又不知究竟应用在何处。找到了一些好文章解惑,在这里分享给大家。

quirksmode的一系列文章都不错,通俗易懂,这篇只是一系列中的某一篇,有机会把javascript这系列都翻译给大家。

原文地址在这里http://www.quirksmode.org/js/events_order.html,句子中有标注“(?)”表示我对这个句子不是很理解,可能有误。正式开始:

事件的发生顺序

这个问题的起源非常简单,假设你在一个元素中又嵌套了另一个元素

-----------------------------------| element1            ||  -------------------------   ||  |element2        |   ||  -------------------------   ||                 |-----------------------------------

:并且两者都有一个onClick事件处理函数(event handler)。如果用户单击元素2,则元素1和元素2的单击事件都会被触发。但是哪一个事件先被触发?哪一个事件处理函数会被首先执行?换句话说,事件的发生顺序到底如何

 

两种模型

不出所料,在那些“不堪回首”(浏览器大战)的日子里,Netscape和微软有两种截然不同的处理方法:

  • Netscape主张元素1的事件首先发生,这种事件发生顺序被称为捕获型
  • 微软则保持元素2具有优先权,这种事件顺序被称为冒泡型

这两种事件顺序是截然相反的。Explorer浏览器只支持冒泡事件,Mozilla,Opera7和Konqueror两者都支持。而更古老的opera和iCab两者都不支持

 

捕获型事件

当你使用捕获型事件时

        | |---------------| |-----------------| element1   | |        ||  -----------| |-----------   ||  |element2 \ /     |   ||  -------------------------   ||    Event CAPTURING     |-----------------------------------

:元素1的事件处理函数首先被触发,元素2的事件处理函数最后被触发

冒泡型事件

当你使用冒泡型事件时

        / \---------------| |-----------------| element1   | |        ||  -----------| |-----------   ||  |element2 | |     |   ||  -------------------------   ||    Event BUBBLING      |-----------------------------------

:元素2 的处理函数首先被触发,元素1其次

W3C 模型

W3c明智的在这场争斗中选择了一个择中的方案。任何发生在w3c事件模型中的事件,首是进入捕获阶段,直到达到目标元素,再进入冒泡阶段

         | | / \-----------------| |--| |-----------------| element1    | | | |        ||  -------------| |--| |-----------   ||  |element2  \ / | |     |   ||  --------------------------------   ||    W3C event model         |------------------------------------------

为一个web开发者,你可以选择是在捕获阶段还是冒泡阶段绑定事件处理函数,这是通过addEventListener()方法实现的,如果这个函数的最后一个参数是true,则在捕获阶段绑定函数,反之false,在冒泡阶段绑定函数。

 假设你要做

element1.addEventListener('click',doSomething2,true)element2.addEventListener('click',doSomething,false)
element2.addEventListener('click',doSomething,false)if (document.captureEvents) document.captureEvents(Event.CLICK);//第二句话我也不知道什么意思,初学者,希望有能人能解释
function doSomething(e){     e.cancelBubble = true;     if (e.stopPropagation) e.stopPropagation();}
生动详细解释javascript的冒泡和捕获,包懂包会(转)

在支持cancelBubble属性的浏览器中设置cancelBubble无伤大雅。浏览器会耸一耸肩然后创造一个这个属性。当然这也并不能真正的取消冒泡,但至少能保证这条命令是安全正确的

 

currentTarget

像我们之前看到的一样,一个事件用target或者是srcElement属性用来表示事件究竟发生在哪个目标元素上(即用户最初点击的元素)。在我们的例子中是元素2,因为我们单击了它。

非常重要的是,要明白在捕获或者冒泡阶段的目标元素是不变的,它始终与元素2相关联。

但是假设我们绑定了以下函数

element1.onclick = doSomething;element2.onclick = doSomething;
element2.attachEvent('onclick',doSomething)

原标题:生动详细解释javascript的冒泡和捕获,包懂包会(转)

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。