js中事件是如何传播的?

小历史:

事件传播的不同还要从早先的两家浏览器巨头说起,网景和IE为了能争夺市场,互相使用相反的技术,当网景使用事件捕获流的时候,IE则使用事件冒泡流。后来W3C为了能规范规定,直接折中,当事件发生时,先发生向下传播,当到底了以后再次使用事件冒泡,逐渐的冒泡到根节点。

事件传播分三个阶段:

DOM事件流(event flow )存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。

  • 在事件捕获阶段,事件从document对象沿着文档树向下传播给目标节点。如果目标的任何一个祖先注册了捕捉事件句柄,那么在事件传播的过程中,就会运行这些句柄(IE10及以下不支持捕获型事件)。
  • 目标阶段发生在目标节点自身,这与0级事件模型提供的事件处理方法类似。
  • 事件冒泡阶段,在这个阶段,事件将从目标元素向上传播回(像冒泡)Document对象的文档层次(IE8 及以下没有捕获阶段)。


    事件传播示意图

无论是事件捕获还是事件冒泡,它们都有一个共同的行为,就是事件传播,它就像一跟引线,只有通过引线才能将绑在引线上的鞭炮(事件监听器)引爆,试想一下,如果引线不导火了,那鞭炮就只有一响了!!!

dom标准事件流的触发的先后顺序为:先捕获再冒泡,即当触发dom事件时,会先进行事件捕获,捕获到事件源之后通过事件传播进行事件冒泡。

事件监听

与这两个事件密切相关的是addEventListener、attachEvent:

addEventListener(event, listener, useCapture)

参数定义:
event---(事件名称,如click,不带on)
listener---事件监听函数
useCapture---是否采用事件捕获进行事件捕捉,默认为false,即采用事件冒泡方式
addEventListener在 IE11、Chrome 、Firefox、Safari等浏览器都得到支持。

attachEvent(event,listener)

参数定义:
event---(事件名称,如onclick,带on)
listener---事件监听函数。
attachEvent主要用于IE浏览器,并且仅在IE10及以下才支持,IE11已经不在使用这个方法。

阻止事件冒泡

w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true

evt.stopPropagation();
evt.cancelBubble = true;

在处理浏览器兼容问题时,可以这样:

if(evt.stopPropagation){
    evt.stopPropagation();
}else{
    evt.cancelBubble = true;
}

还有一种以阻止默认事件的方式去阻止冒泡行为

return false

区别

  • event.stopPropagation();
    事件处理过程中,阻止了事件冒泡,但不会阻击默认行为

  • return false;
    事件处理过程中,阻止了事件冒泡,也阻止了默认行为

  • event.preventDefault();
    它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为

————愿你在迷茫时,坚信你的珍贵,爱你所爱,行你所行,听从你心,无问西东。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,076评论 1 10
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,548评论 1 11
  • js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...
    道无虚阅读 2,420评论 0 2
  • 声明:本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下(...
    angryyan阅读 7,131评论 1 6
  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 1,282评论 3 11