javascript事件冒泡详解和捕获、阻止方法

标签:帮助中心    日期:2017-12-28 10:50    录入:汇盛国际平台    浏览:

  

[javascript,事件冒泡,事件传播]javascript事件冒泡详解和捕获、阻止方法

  

一、事件的发生顺序  

  

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

  
  -----------------------------------  
  | 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)

  

  

如果用户单击元素2,则接下来会发生:  

  

(事件在这里就像一个观光客,由外至内游览,逐渐接近被触发的主要元素,然后又反向离开)  

  

1.单击事件首先进入捕获阶段开始(逐渐接近元素2的方向)。查看元素2的祖先元素中是否有在捕获阶段有onclick处理函数的  
  2.发现元素1有一个,于是doSomething2被执行  
  3.事件检查到目标自己(元素2),捕获阶段没有发现更多的处理函数了。事件开始进入冒泡阶段,想当然执行doSomething(),这个绑定于元素2冒泡阶段的函数。

  
  4.事件向远离元素2的方向,查看是否有任何祖先元素在冒泡阶段绑定了一个处理函数。没有这样的情况,所以什么也没有发生  

★★★小编:汇盛国际注册 整理文章,欢迎大家转载 ★★★
上一篇:汇盛国际:5个JavaScript经典面试题
下一篇:Jquery easyUI 更新行示例
相关文章阅读
点击右上角的分享按钮即可收藏汇盛国际平台注册 随时随地与好友一起分享精彩内容噢
最近更新
热门排行