事件冒泡与事件捕获

事件流描述了页面中的元素接收到事件的顺序。事件流分为:事件冒泡与事件捕获

1. 事件冒泡

事件冒泡是IE的开发团队提出的,它定义了事件首先由最具体的元素接收,然后逐级冒泡到上级元素。

2. 事件捕获

事件捕获定义了事件首先由最外层的元素(window)接收,然后才是下级元素。

注意:主流的高版本浏览器都支持这两种事件流,但由于老版本的浏览器不支持事件捕获,所有更多的使用的还是事件冒泡.

DOM2级事件规定的事件流包括三个阶段:

1. 事件捕获阶段

2. 处于目标阶段

3. 事件冒泡阶段

首先发生的是事件捕获,在这个阶段为外层的元素截获事件提供了机会,然后就是实际的事件目标接收到了事件,最后才是冒泡阶段,在这个阶段可以对事件进行响应(触发事件监听器)。
注意:虽然规范要求在捕获阶段,真正的事件目标元素不会接收到事件,但是主流高版本浏览器都实现了在捕获阶段就触发这个事件,这就提供了两个机会在目标事件上操作事件,例子在下面.

<div>
  <a href="#">l am a link</a>
</div>
var div = document.querySelector('div');
var a = document.querySelector('a');

a.addEventListener('click',function(event){
    console.log('capture')
  },false); //为元素a绑定click事件处理函数,该事件将在冒泡阶段触发。

  a.addEventListener('click',function(){
    console.log('bubble')
  },true);  //为元素a绑定click事件处理函数,该事件将在事件捕获阶段触发,早于冒泡阶段的监听器。

  div.addEventListener('click',function(e){
    console.log('div-capture')
  },true);  //为元素div绑定事件处理函数,该事件将在事件捕获阶段触发,早于a元素。

打开浏览器,点击元素a,打开控制台,你将看到依次输出:div-capture,capture,bubble。这证明了,有两次机会可以为元素注册事件,并且捕获阶段早于冒泡阶段触发;

补充:

1.addEventListener方法属于DOM二级,使用时如果不提供第三个参数,默认是在冒泡阶段触发。
2. on+事件名,DOM0级方法,使用此方法注册的监听器将在冒泡阶段触发。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,473评论 1 11
  • JavaScript与HTML之间的交互是通过事件来实现的,事件就是当文档或者浏览器窗口发生一些特定的交互瞬间,事...
    plainnany阅读 957评论 1 2
  • 阻止默认动作的发生 先查看event.cancelable属性来判断一个事件的默认动作是够可以被取消。若为fals...
    小淘气_嘻阅读 291评论 0 0
  • 首先我们需要知道所谓的事件冒泡与事件捕获是怎么来的 微软提出了名为事件冒泡(event bubbling)的事件流...
    张镕凡阅读 1,187评论 0 97
  • js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...
    道无虚阅读 2,331评论 1 3