什么是冒泡和捕获?

转载 2015年11月19日 13:27:33

把事件捕获和冒泡的过程统称为事件的传播

事件的传播是可以阻止的:

  • 在W3c中,使用stopPropagation()方法
  • 在IE下设置cancelBubble = true;
在捕获的过程中stopPropagation();后,后面的冒泡过程也不会发生了~  在IE中则使用cancelBubble(IE中只有冒泡,没有捕获)
3.阻止事件的默认行为,例如click <a>后的跳转~
  • 在W3c中,使用preventDefault()方法;
  • 在IE下设置window.event.returnValue = false;
不是所有的事件都能冒泡,例如:blur、focus、load、unload,(这个是从别人的文章里摘过来的,我没测试)

JavaScript所有事件的两个阶段:捕获和冒泡
一下是一段简单的HTML代码

<body>
     <ul>
            <li>
              click here
           </li>
     </ul>
</body>
如果我们点击了Li,则先回响应body的捕获事件,接下来就是ul li ,然后进入冒泡时间,顺序相反。
如果我们分别设置了响应函数,则会分别响应
我们可以阻止冒泡
function(e)
{   
<a target=_blank class="s_kwd" style="color: rgb(51, 102, 153);">if</a> (<a target=_blank class="s_blk     " name="blk16" id="s##16" style="color: rgb(51, 102, 153);"></a><a target=_blank class="s_unk" id="s##17" style="color: rgb(51, 102, 153);">e</a> && <a target=_blank class="s_unk" id="s##21" style="color: rgb(51, 102, 153);">e</a>.<a target=_blank class="s_unk" id="s##23" style="color: rgb(51, 102, 153);">stopPropagation</a><a target=_blank class="s_blk     " name="blk16" id="s##24" style="color: rgb(51, 102, 153);">)</a>
        <a target=_blank class="s_cmt" id="s##27" style="color: rgb(51, 102, 153);">// 支持W3C的stopPropation()方法</a>
        <a target=_blank class="s_unk" id="s##30" style="color: rgb(51, 102, 153);">e</a>.<a target=_blank class="s_unk" id="s##32" style="color: rgb(51, 102, 153);">stopPropagation
()</a> <a target=_blank class="s_kwd" style="color: rgb(51, 102, 153);">else</a>
        <a target=_blank class="s_cmt" id="s##41" style="color: rgb(51, 102, 153);">// 否则,我们得使<span style="color: white; background-color: rgb(136, 104, 0);">用</span>IE的方式来取消事件冒泡</a>
        <a target=_blank class="s_unk" id="s##44" style="color: rgb(51, 102, 153);">window</a>.<a target=_blank class="s_unk" id="s##46" style="color: rgb(51, 102, 153);">event</a>.<a target=_blank class="s_unk" id="s##48" style="color: rgb(51, 102, 153);">cancelBubble</a> = <a target=_blank class="s_kwd" style="color: rgb(51, 102, 153);">true</a>;
}

事实上,捕获阶段是一个和冒泡阶段完全相反的过程,即事件由祖先元素向子元素传播,和一个石子儿从水面向水底下沉一样,要说明的是在IE,opera浏览器中,是不存在这个阶段的。从各浏览器提供的注册事件监听的方法中可见一斑,例如适用于ie,opera的attachEvent,有两个参数,attachEvent(”on”+type,fn),而适用于所谓标准浏览器的addEventListener则有三个参数,addEventListener(type,fn,boolean),前面两个参数不用解释,第三个参数boolean,就是决定注册事件发生在捕获阶段还是冒泡阶段,具体参考如下:

true : 捕获阶段

false : 冒泡阶段

    对“捕获”和“冒泡”这两个概念,我想我们对冒泡更熟悉一些,因为在我们使用的所有浏览器中,都支持事件冒泡,即事件由子元素向祖先元素传播的,就像气泡从水底向水面上浮一样。而在像firefox,chrome,safari这类所谓的标准浏览器中,事件传播还有个阶段,那就是捕获阶段,这个很少有用武之地,所以被人疏忽遗忘也在所难免了,不常用不代表它不存在,本着科学严谨的态度,我们有必要去看一下它的庐山真面目。

事件冒泡和捕获的执行顺序

给一个dom同时绑定两个点击事件,一个用捕获,一个用冒泡,会执行几次事件,会先执行冒泡还是捕获?...
  • moguzhale
  • moguzhale
  • 2016年12月07日 11:05
  • 2332

彻底弄懂JS的事件冒泡和事件捕获

他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。相反的,事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数,就是控制事件触发顺序是...
  • qq_28602957
  • qq_28602957
  • 2017年03月05日 20:25
  • 2203

事件冒泡和事件捕获的含义? — 第13.1讲

该懂得一定要懂,该学的不能再拖,该行动的就是此刻! 一:事件流的历史?  就像是在桌面上画了许多同心圆,当把手放在圆心上,那么你的手指指的不是一个圆,而是所有的圆。公司的浏览器开发团队在看待浏览器事件...
  • flyingpig2016
  • flyingpig2016
  • 2016年10月29日 14:18
  • 797

js之事件冒泡和事件捕获详细介绍

事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别,有需要的朋友可以参考一下 (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。  ...
  • taoerchun
  • taoerchun
  • 2016年04月27日 16:18
  • 1019

JS中的事件冒泡和事件捕获

谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。 事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(targe...
  • donggx
  • donggx
  • 2016年12月13日 09:06
  • 1398

看懂此文,不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序

抽空学习了下,javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享。到这里是不是可以理解addEventListener(type,handler,useCapture)这个A...
  • aitangyong
  • aitangyong
  • 2015年01月28日 23:13
  • 10594

dom事件冒泡和捕获

原文:Event order 翻译:hh54188的博客   前言:虽然精通jquery,但对它的原型javascript却不是很了解,最近在学习javascript中遇到了一些困难,比如冒泡和...
  • cdnight
  • cdnight
  • 2015年12月23日 17:27
  • 793

js响应事件的阶段,捕获阶段,冒泡阶段

当鼠标点击所看到的的按钮时,其实发生了一系列的事件传递,可以想象一下,button实际上是被body“包裹”起来的,body是被html“包裹”起来的,html是被document“包裹”起来的,do...
  • JQuery_QQ
  • JQuery_QQ
  • 2016年05月18日 23:58
  • 1782

JS中的事件捕获和事件冒泡

前言 前段时间给应届生讲JS的事件,顺便讲了一下事件捕获和事件冒泡是怎么一回事儿,但是没给他具体的例子,这里添加一段列子,顺便给菜鸟们一些具体代码来看看冒泡和捕获是怎么一回事儿。 1、事件捕获 ...
  • dong123dddd
  • dong123dddd
  • 2016年02月13日 23:37
  • 3258

事件监听中的冒泡流和捕获流有趣现象

事件监听中的冒泡流和捕获流有趣现象这两天在看js权威指南的时候看见addEventListener的第二个参数为使用哪一种事件流,实践了一下,然后想到一个有趣的事,如果两个一起用会怎么样。 首先看看...
  • Dodd9199
  • Dodd9199
  • 2016年05月03日 16:11
  • 526
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:什么是冒泡和捕获?
举报原因:
原因补充:

(最多只允许输入30个字)