转自：http://www.jb51.net/article/42492.htm

（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

IE 5.5: div -> body -> document

IE 6.0: div -> body -> html -> document

Mozilla 1.0: div -> body -> html -> document -> window

（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。

DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数 useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用 attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候 执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。

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

假设一个元素div，它有一个下级元素p。
<div>
　　<p>元素</p>
</div>
这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？
 
两种模型
以前，Netscape和Microsoft是不同的实现方式。

Netscape中，div先触发，这就叫做事件捕获。

Microsoft中，p先触发，这就叫做事件冒泡。

两种事件处理顺序刚好相反。IE只支持事件冒泡，Mozilla, Opera 7 和 Konqueror两种都支持，旧版本的Opera's 和 iCab两种都不支持 。

事件捕获
当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。

事件冒泡
当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

W3C模型
W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。

程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。

ele.addEventListener('click',doSomething2,true)

true=捕获

false=冒泡

传统绑定事件方式
在一个支持W3C DOM的浏览器中，像这样一般的绑定事件方式，是采用的事件冒泡方式。

ele.onclick = doSomething2

IE浏览器
如上面所说，IE只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数attachEvent。

ele.attachEvent("onclick", doSomething2);

附：事件冒泡（的过程）：事件从发生的目标（event.srcElement||event.target）开始，沿着文档逐层向上冒泡，到document为止。

事件的传播是可以阻止的：
• 在W3c中，使用stopPropagation（）方法
• 在IE下设置cancelBubble = true；
在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了~
3.阻止事件的默认行为，例如click <a>后的跳转~
• 在W3c中，使用preventDefault（）方法；
• 在IE下设置window.event.returnValue = false;

首先讲解一下js中preventDefault和stopPropagation两个方法的区别：
preventDefault
方法的起什么作用呢？我们知道比如<a
href="http://www.baidu.com">百度</a>,这是html中最基础的东西，起的作用就是点击百度链接到
http://www.baidu.com,这是属于<a>标签的默认行为，而preventDefault方法就是可以阻止它的默认行为的
发生而发生其他的事情。看一段代码大家就明白了：

复制代码 代码如下:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS阻止链接跳转</title>
<script type="text/javascript">
function stopDefault( e ) {
if ( e && e.preventDefault )
   e.preventDefault();
    else
   window.event.returnValue = false;

return false;
}
</script>
</head>
<body>
<a href="http://www.baidu.com" id="testLink">百度</a>
<script type="text/javascript">
var test = document.getElementById('testLink');
test.onclick = function(e) {
   alert('我的链接地址是：' + this.href + ', 但是我不会跳转。');
   stopDefault(e);
}
</script>
</body>
</html>

此时点击百度链接，不会打开http://www.baidu.com，而只是弹出一个alert对话框。

preventDefault方法讲解到这里，stopPropagation方法呢？讲stopPropagation方法之前必需先给大家讲解一下js的事件代理。

事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。当一个元素上的事件被触发的时候，比如说鼠标点击了一个按
钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。对任何一个事件来
说，其目标元素都是原始元素，在我们的这个例子中也就是按钮。目标元素它在我们的事件对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加
到一个元素上，等待事件从它的子级元素里冒泡上来，并且可以很方便地判断出这个事件是从哪个元素开始的。

stopPropagation方法就是起到阻止js事件冒泡的作用，看一段代码。

复制代码 代码如下:
<!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="gb2312">
<head>
<title> 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）</title>
<meta name="keywords" content="JS,事件冒泡,cancelBubble,stopPropagation" />
<script>
function doSomething (obj,evt) {
 alert(obj.id);
 var e=(evt)?evt:window.event;
 if (window.event) {
  e.cancelBubble=true;// ie下阻止冒泡
 } else {
  //e.preventDefault();
  e.stopPropagation();// 其它浏览器下阻止冒泡
 }
}
</script>
</head>
<body>
<div id="parent1" onclick="alert(this.id)" style="width:250px;
 <p>This is parent1 div.</p>
 <div id="child1" onclick="alert(this.id)" style="width:200px;
  <p>This is child1.</p>
 </div>
 <p>This is parent1 div.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)" style="width:250px;">
 <p>This is parent2 div.</p>
 <div id="child2" onclick="doSomething(this,event);" style="width:200px;">
  <p>This is child2. Will bubble.</p>
 </div>
 <p>This is parent2 div.</p>
</div>
</body>
</HTML>

大家运行一下上面的代码就明白了。

 
 

js 事件冒泡、事件捕获、stopPropagation、preventDefault的更多相关文章

  1. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  2. js中冒泡事件和捕获事件

    js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...

  3. 理解js事件冒泡事件委托事件捕获

    js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...

  4. JS 事件冒泡、捕获。学习记录

    作为一个转行刚到公司的新人,任务不多,这一周任务全部消灭,闲暇的一天也别闲着,悄悄的看起了书.今天写一下JS的事件冒泡.捕获. 也是今天看的内容有点多了,有些消化不了,就随手记录一下.纯属自我理解,如 ...

  5. JavaScript事件——冒泡、捕获

    本节要点:1.干预系统的事件处理机制 (一)DOM事件流 (二)停止事件冒泡 (三)阻止事件的默认行为 1.干预系统的事件处理机制 (一)DOM事件流 DOM模型是一个树形结构,在DOM模型中,HTM ...

  6. 事件冒泡与捕获&amp;事件托付

    设想这样一种情况 一个div里面有个span元素  ,当鼠标单击span时,这个事件算是谁的? div还是span? 准确的说两个都触发了,这种认可大家都允许,事实就是这种, 第二个问题来了,这个事件 ...

  7. js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

    preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就 ...

  8. js事件机制——事件冒泡和捕获

    概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. IE浏览器:事件从 ...

  9. js 事件冒泡、捕获；call()、apply()

    他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件冒泡是自下而上的去触发事件.绑定事件方法的第三个参数,就是控制事件触发顺序是 ...

  10. JS事件冒泡与捕获

    1事件传播——冒泡与捕获 默认情况下,事件使用冒泡事件流,不使用捕获事件流.然而,在Firefox和Safari里,你可以显式的指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这 ...

随机推荐

  1. Linux - nginx基础及常用操作

    目录 Linux - nginx基础及常用操作 Tengine淘宝nginx安装流程 nginx的主配置文件nginx.conf 基于域名的多虚拟主机实战 nginx的访问日志功能 网站的404页面优 ...

  2. 【模板】求1~n的整数的乘法逆元

    洛谷3811 先用n!p-2求出n!的乘法逆元 因为有(i-1)!-1=i!-1*i (mod p),于是我们可以O(n)求出i!-1 再用i!-1*(i-1)!=i-1 (mod p)即是答案 #i ...

  3. 手机访问pc版网站自动跳转为手机版页面

    1.PC版首页</head>标签前加上以下脚本 <script src="/tools/browser_redirect.ashx"></script ...

  4. 【Codeforces Global Round 1 A】Parity

    [链接] 我是链接,点我呀:) [题意] 给你一个k位数b进制的进制转换. 让你求出来转成10进制之后这个数字是奇数还是偶数 [题解] 模拟一下转换的过程,加乘的时候都记得对2取余就好 [代码] im ...

  5. Caused by: android.os.TransactionTooLargeException总结

    错误信息 Error: android.os.TransactionTooLargeException W/ActivityManager(344): android.os.TransactionTo ...

  6. [bzoj2654]tree_二分_kruskal

    tree bzoj-2654 题目大意:给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有need条白色边的生成树.题目保证有解. 注释:$1\le V\le 5\cdot 10^4 ...

  7. 洛谷 P1479 宿舍里的故事之五子棋

    P1479 宿舍里的故事之五子棋 题目描述 宿舍里好多好多有趣的事! 7890653今天看到不知何时流行的五子棋,在宿舍里拿个本子,画一些格子,一个棋盘就做好了! 当7890653把目光放到棋上,突发 ...

  8. GDB 调试 PHP文件

    http://www.bo56.com/%E5%9C%A82016%E7%9A%84phpcon%E5%A4%A7%E4%BC%9A%E4%B8%8A%E7%9A%84%E5%88%86%E4%BA% ...

  9. LINUX 内核内存管理

    https://linux-mm.org/ http://www.cnblogs.com/liloke/archive/2011/11/20/2255737.html

  10. 2.2－VLAN间路由

    2.2-VLAN间路由     第一代LAN间的通信:     不支持VLAN的交换机:由一个路由器和几个交换机组成,每个交换机的所有端口都同属于一个网段/LAN:在路由器上有几个网段就有几个与之相对 ...