500 - 内部服务器错误。
500 - 内部服务器错误。
您查找的资源存在问题，因而无法显示。js之事件冒泡和事件捕获详细介绍
字体：[ ] 类型：转载 时间：
事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别，有需要的朋友可以参考一下
（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)
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 =4.哇，终于写完了，一边测试一边写的额，不是所有的事件都能冒泡，例如：blur、focus、load、unload，（这个是从别人的文章里摘过来的,我没测试）。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具jquery 事件冒泡的介绍以及如何阻止事件冒泡
字体：[ ] 类型：转载 时间：
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理,挺起来感觉这么不可思议，接下来为大家解除疑惑
什么是JS事件冒泡？ 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 如何来阻止Jquery事件冒泡？ 通过一个小例子来解释
代码如下: &%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default5.aspx.cs"Inherits="Default5"%& &!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& &htmlxmlns="http://www.w3.org/1999/xhtml"& &headrunat="server"& &title&Porschev---Jquery事件冒泡&/title& &scriptsrc="jquery-1.3.2-vsdoc.js"type="text/javascript"&&/script& &/head& &body& &formid="form1"runat="server"& &divid="divOne"onclick="alert('我是最外层');"& &divid="divTwo"onclick="alert('我是中间层！')"& &aid="hr_three"href=""mce_href=""onclick="alert('我是最里层！')"&点击我&/a& &/div& &/div& &/form& &/body& &/html&
比如上面这个页面， 分为三层：divOne是第外层，divTwo中间层，hr_three是最里层; 他们都有各自的click事件，最里层a标签还有href属性。 运行页面，点击“点击我”,会依次弹出：我是最里层----&我是中间层----&我是最外层----&然后再链接到百度. 这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。 事件冒泡过程（以标签ID表示）：hr_three----&divTwo----&divOne。从最里层冒泡到最外层。 如何来阻止? 1.event.stopPropagation();
代码如下: &scripttype="text/javascript"& $(function(){ $("#hr_three").click(function(event){ event.stopPropagation(); }); }); &script&
再点击“点击我”，会弹出：我是最里层，然后链接到百度 2. 如果头部加入的是以下代码
代码如下: &scripttype="text/javascript"& $(function(){ $("#hr_three").click(function(event){
}); }); &script&
再点击“点击我”，会弹出：我是最里层，但不会执行链接到百度页面 由此可以看出： 1.event.stopPropagation(); 事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转） 2. 事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转） 还有一种有冒泡有关的： 3.event.preventDefault(); 如果把它放在头部A标签的click事件中，点击“点击我”。 会发现它依次弹出：我是最里层----&我是中间层----&我是最外层，但最后却没有跳转到百度 它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具4041人阅读
Javascript（2）
&&&&&&&& 在浏览器客户端应用平台，基本生都是以事件驱动的，即某个事件发生，然后做出相应的动作。
&&&&&&&& 浏览器的事件表示的是某些事情发生的信号。事件的阐述不是本文的重点，尚未了解的朋友，可以访问
进行了解，这将有助于更好地理解以下的内容 。
2.冒泡机制
&&&&&&&&&&& 什么是冒泡呢？
&&&&&&&& 下面这个图片大家应该心领神会吧，气泡从水底开始往上升，由深到浅，升到最上面。在上升的过程中，气泡会经过不同深度层次的水。
& & & & & & && &&&&&&&&&
&&&&&&&&&&&& 相对应地：这个气泡就相当于我们这里的事件，而水则相当于我们的整个dom树；事件从dom 树的底层 层层往上传递，直至传递到dom的根节点。
简单案例分析
下面通过一个简单的例案例来阐述冒泡原理：
&&&&&&& 定义一个html, 里面有三个简单的dom 元素：div1,div2, span，div2包含span，div1 包含div2；而它们都在body 下：&&&&&
&body id=&body&&
&div id=&box1& class=&box1&&
&div id=&box2& class=&box2&&
&span id=&span&&This is a span.&/span&
界面原型如下：
&&&&&&&&&&&&&&
&&&&&&&&&&&&&&
&&&&&&&在这个基础上，我们实现下面的功能：
&&&&&&&&&a.body添加 click 事件监听，当body捕获到event事件时，打印出事件发生的时间和 触发事件的节点信息：
&script type=&text/javascript&&
window.onload = function() {
document.getElementById(&body&).addEventListener(&click&,eventHandler);
function eventHandler(event) {
console.log(&时间：&+new Date(event.timeStamp)+& 产生事件的节点：& + event.target.id +&& 当前节点：&+event.currentTarget.id);
当我们依次点击&This is span&，div2，div1，body后，输出以下信息：
&&&&&&&&&&&
分析以上的结果：
&&&&&&&&&&&&&&无论是body，body 的子元素div1，还是 div的子元素div2，还有 span, 当这些元素被点击click时，都会产生click事件，并且body都会捕获到，然后调用相应的事件处理函数。就像水中的气泡从底往上冒一样，事件也会往上传递。
&&&&&&&&&&&& 事件传递的示意图如下所示：
&&&&&&&&&&&
&&&&&&&& 一般地，事件在传递过程中会有一些信息，这些是事件的组成部分：事件发生的时间+事件发生的地点+ 事件的类型+事件的当前处理者+其他信息，
完整的html代码如下：
&!DOCTYPE html&
&meta charset=&UTF-8&&
&script type=&text/javascript& src=&js/jquery-1.11.0.js&&&/script&
&title&Insert title here&/title&
&style type=&text/css&&
border: green 40
width: 300
height: 300
border: yellow 40
width: 220
height: 220
background-color: rgba(128, 128, 128, 0.22);
&script type=&text/javascript&&
window.onload = function() {
document.getElementById(&body&).addEventListener(&click&,eventHandler);
function eventHandler(event) {
console.log(&时间：&+new Date(event.timeStamp)+& 产生事件的节点：& + event.target.id +&& 当前节点：&+event.currentTarget.id);
&body id=&body&&
&div id=&box1& class=&box1&&
&div id=&box2& class=&box2&&
&span id=&span&&This is a span.&/span&
& b.终止事件的冒泡
&&& 我们现在想实现这样的功能，在div1 点击的时候，弹出 &你好，我是最外层div。&，点击div2 的时候，弹出 &你好，我是第二层div&；点击span 的时候，弹出&您好，我是span。&。
&&& 由此我们会有下面的javascript片段：
&script type=&text/javascript&&
window.onload = function() {
document.getElementById(&box1&).addEventListener(&click&,function(event){
alert(&您好，我是最外层div。&);
document.getElementById(&box2&).addEventListener(&click&,function(event){
alert(&您好，我是第二层div。&);
document.getElementById(&span&).addEventListener(&click&,function(event){
alert(&您好，我是span。&);
& && 预期上述代码会单击span 的时候，会出来一个弹出框 &您好，我是span。& 是的，确实弹出了这样的对话框：
&&&&&&&&&&
& && 然而，不仅仅会产生这个对话框，当点击确定后，会依次弹出下列对话框：
&&&&&&&&&&&&&&&&
这显然不是我们想要的！ 我们希望的是点谁显示谁的信息而已。为什么会出现上述的情况呢？ 原因就在于事件的冒泡，点击span的时候，span 会把产生的事件往上冒泡，作为父节点的div2 和 祖父节点的div1也会收到此事件，于是会做出事件响应，执行响应函数。现在问题是发现了，但是怎么解决呢？
&&&&&&&方法一：我们来考虑一个形象一点的情况：水中的一个气泡正在从底部往上冒，而你现在在水中，不想让这个气泡往上冒，怎么办呢？——把它扎破！没了气泡，自然不会往上冒了。类似地，对某一个节点而言，如果不想它现在处理的事件继续往上冒泡的话，我们可以终止冒泡：
&&&&&&&& 在相应的处理函数内，加入& event.stopPropagation()&& ,终止事件的广播分发，这样事件停留在本节点，不会再往外传播了。修改上述的script片段：
&script type=&text/javascript&&
window.onload = function() {
document.getElementById(&box1&).addEventListener(&click&,function(event){
alert(&您好，我是最外层div。&);
event.stopPropagation();
document.getElementById(&box2&).addEventListener(&click&,function(event){
alert(&您好，我是第二层div。&);
event.stopPropagation();
document.getElementById(&span&).addEventListener(&click&,function(event){
alert(&您好，我是span。&);
event.stopPropagation();
&&&&&&&&&&&&&经过这样一段代码，点击不同元素会有不同的提示，不会出现弹出多个框的情况了。
&&&&&&&&&&&方法二：事件包含最初触发事件的节点引用 和 当前处理事件节点的引用，那如果节点只处理自己触发的事件即可,不是自己产生的事件不处理。event.target 引用了产生此event对象的dom 节点，而event.currrentTarget 则引用了当前处理节点，我们可以通过这
两个target 是否相等。
&&&&&&&&&&& 比如span 点击事件，产生一个event 事件对象，event.target 指向了span元素，span处理此事件时，event.currentTarget 指向的也是span元素，这时判断两者相等，则执行相应的处理函数。而事件传递给 div2 的时候，event.currentTarget变成 div2，这时候判断二者不相等，即事件不是div2 本身产生的，就不作响应处理逻辑。&&&&&&&&&&&&&&&
&script type=&text/javascript&&
window.onload = function() {
document.getElementById(&box1&).addEventListener(&click&,function(event){
if(event.target == event.currentTarget)
alert(&您好，我是最外层div。&);
document.getElementById(&box2&).addEventListener(&click&,function(event){
if(event.target == event.currentTarget)
alert(&您好，我是第二层div。&);
document.getElementById(&span&).addEventListener(&click&,function(event){
if(event.target == event.currentTarget)
alert(&您好，我是span。&);
&&&&&&&& 比较：
&&&&&&&& 从事件传递上看：方法一在于取消事件冒泡，即当某些节点取消冒泡后，事件不会再传递；方法二在于不阻止冒泡，过滤需要处理的事件，事件处理后还会继续传递；
&&&&&&&& 优缺点：
&&&&&&&& 方法一缺点：为了实现点击特定的元素显示对应的信息，方法一要求每个元素的子元素也必须终止事件的冒泡传递，即跟别的元素功能上强关联，这样的方法会很脆弱。比如，如果span 元素的处理函数没有执行冒泡终止，则事件会传到div2 上，这样会造成div2 的提示信息；
&&&&&&& 方法二缺点：方法二为每一个元素都增加了事件监听处理函数，事件的处理逻辑都很相似，即都有判断 if(event.target == event.currentTarget)，这样存在了很大的代码冗余，现在是三个元素还好，当有10几个，上百个又该怎么办呢？
还有就是为每一个元素都有处理函数，在一定程度上增加逻辑和代码的复杂度。
&&&&&&& 我们再来分析一下方法二：方法二的原理是 元素收到事件后，判断事件是否符合要求，然后做相应的处理，然后事件继续冒泡往上传递；
&&&&&&& 既然事件是冒泡传递的，那可不可以让某个父节点统一处理事件，通过判断事件的发生地（即事件产生的节点），然后做出相应的处理呢？答案是可以的，下面通过给body 元素添加事件监听，然后通过判断event.target 然后对不同的target产生不同的行为。
& & & & 将方法二的代码重构一下：
&script type=&text/javascript&&
window.onload = function() {
document.getElementById(&body&).addEventListener(&click&,eventPerformed);
function eventPerformed(event) {
var target = event.
switch (target.id) {
case &span&:
alert(&您好，我是span。&);
case &div1&:
alert(&您好，我是第二层div。&);
case &div2&:
alert(&您好，我是最外层div。&);
&/script&&&&&&&&&&&& 结果会是点击不同的元素，只弹出相符合的提示，不会有多余的提示。
&&&&&&&&&& 通过以上方式，我们把本来每个元素都要有的处理函数，都交给了其祖父节点body 元素来完成了，也就是说，span,div2,div1 将自己的响应逻辑委托给body，让它来完成相应逻辑，自己不实现相应逻辑，这个模式，就是所谓的事件委托。
&&&&&&&&& 下面是一个示意图：
&& 关于事件代理的问题，以后继续探讨。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：326088次
积分：4302
积分：4302
排名：第5703名
原创：49篇
译文：15篇
评论：333条
闷骚小少年自己搭了个主页，欢迎感兴趣的同学过来踩踩~
阅读：39115
阅读：86160
文章：10篇
阅读：69133
(2)(3)(3)(1)(10)(4)(1)(12)(12)(3)(10)(5)事件冒泡与事件捕获的先后问题？ - 跟谁学
搜索你想学的科目、老师试试，例如“钢琴”搜索吉安
&&事件冒泡与事件捕获的先后问题？我看资料上说现代浏览器对于事件冒泡与事件捕获都是支持的。我写了如下代码：
然后我在 Chrome和 Safari浏览器中运行的结果都是一样的。如下图： 问题来了： 为什么Btn的click事件顺序和div是相反的？暮尘Plutokikong
1). 事件处理其实有3个阶段：事件捕获阶段、事件目标阶段、事件冒泡阶段2). 先从根节点向下执行捕获回调函数，一直到实际触发事件的元素的父元素位置，捕获过程结束；3). 然后事件传播到实际触发事件的DOM元素上，为事件目标阶段，这个阶段有个地方要注意:&For event listeners attached the event is in the target phase, rather than capturing and bubbling phases. Events in the target phase will trigger all listeners on an element regardless of the useCapture parameter.&在事件目标阶段，无论addEventListener函数第3个参数指定的时true还是false，绑定的回调函数都会被执行4). 然后冒泡阶段开始，执行触发事件的DOM节点上的回调函数，然后继续向上执行冒泡阶段的回调函数，一直到根节点5). 事件的执行顺序按事件回调函数的添加顺序执行所以执行顺序为div1-&div2 捕获阶段-&btn1，false 目标阶段先添加的-&btn1，true 目标阶段后添加的div2-&div1
冒泡阶段如果把添加的事件顺序修改一下
div1.addEventListener("click",function ( event ) {
console.log("div1,false");
div2.addEventListener("click",function ( event ) {
console.log("div2,false");
btn.addEventListener("click",function ( event ) {
console.log("btn,true");
div1.addEventListener("click",function ( event ) {
console.log("div1,true");
div2.addEventListener("click",function ( event ) {
console.log("div2,true");
btn.addEventListener("click",function ( event ) {
console.log("btn,false");
},false);那么执行的顺序为div1-&div2 捕获阶段-&btn1，true 目标阶段先添加的-&btn1，false 目标阶段后添加的div2-&div1
在一个前端群群友的帮助下解决了这个问题意思就是事件流中 DIV1 -& DIV2 是捕获阶段，触发捕获阶段的监听器 然后事件流转到BTN 就进入目标阶段 该阶段没有冒泡和捕获之分 所以两个监听器按照绑定顺序先后触发。然后事件 -&div2 -&div1
这个阶段就是冒泡阶段 触发冒泡阶段的监听器
相关问题大家都在看最新提问
关注我们官方微信关于跟谁学服务支持帮助中心