[JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

时间:2022-10-02 08:23:50

  当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面。

事件流  

  事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队提出了两种完全相反的事件流。

  冒泡事件流:IE提出的事件流,即事件由最具体的元素接收,逐级向上,传播到页面。

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  捕获事件流:Netscape提出的事件流,即事件由页面元素接收,逐级向下,传播到最具体的元素。

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  两种事件流在DOM2级事件模型中得到了统一,相较于DOM0级事件模型,DOM2级有着如下特点:

    1、允许在某个元素上绑定多个同类型的事件

    2、规定了事件流的三个阶段:捕获阶段、目标阶段、冒泡阶段

    【测试】使用addEventListener输出事件流过程:

    分别在window、document、html、body、btn上绑定事件,单击按钮,输出结果如下[FF测试]

    [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

    可以看到当事件处于目标阶段时,并不只触发一次,而是分别属于捕获和冒泡两个阶段。

  尽管DOM2级事件规定了事件的三个阶段,但遗憾的是,IE8及以下浏览器只支持冒泡事件流。

    【测试】使用attachEvent输出事件流过程:

    分别在window、document、html、body、btn上绑定事件,单击按钮,输出结果如下[IE8测试]   

    [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

    可以看到仅输出了目标和冒泡阶段的信息,并且绑定在window上的事件并没有被触发,IE8及以下浏览器的冒泡事件仅冒泡到document

  目前支持以addEventListener绑定事件的浏览器:FF、Chrome、Safari、Opera、IE9-11

  目前支持以attachEvent绑定事件的浏览器:IE6-10

  测试浏览器支持情况,参考博客:[JS学习笔记]浅谈Javascript事件模型

阻止事件传递

  通过前面的讲述,可以知道在事件流中,某元素的事件被触发,同时也会导致其容器元素上的同类型事件被触发。但很多时候,我们并不希望这样的结果。

  此时可以通过stopPropagation()或cancelBubble来阻止事件向下一级元素传递。

stopPropagation()

  stopPropagation()是W3C标准下阻止事件传递的方法

  【测试】使用addEventListener绑定,测试stopPropagation():

  分别在box0-2上绑定事件,单击box0,输出结果[FF测试]

  由于addEventListener可以设置是否在捕获阶段运行,故可分为[在捕获阶段阻止事件传递]和[在冒泡阶段阻止事件传递] 

  1、在捕获阶段阻止事件传递

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  2、在冒泡阶段阻止事件传递

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  通过测试,可以看到当阻止事件传递后,事件流将不会继续执行。

  【测试】使用attachEvent绑定,测试stopPropagation():

  分别在box0-2上绑定事件,单击box0,输出结果[IE8测试]

  由于attachEvent不支持捕获事件流,故仅冒泡阶段测试其对stopPropagation()的支持程度:

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  可以看到attachEvent的event对象不支持stopPropagation()方法

cancelBubble

  cancelBubble是IE标准下阻止事件传递的属性,设置cancelBubble=true表示阻止冒泡

  【测试】使用addEventListener绑定,测试cancelBubble:

  分别在box0-2上绑定事件,单击box0,输出结果

  1、在捕获阶段阻止:

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  [FF测试]

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  [Chrome测试]

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  [IE11测试]

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  可以看到,只有在FF上的结果是我们期望的结果,此外,通过对Safari、Opera进行测试,输出结果与Chrome一致;对IE9-10进行测试,输出结果与IE11一致

  2、在冒泡阶段阻止:

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  FF、Chrome、Safari、Opera、IE9-11均输出上图结果。

  【测试】使用attachEvent绑定,测试cancelBubble:

  分别在box0-2上绑定事件,单击box0,输出结果[IE8测试]

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

总结

  综合测试结果,总结stopPropagation()及cancelBubble兼容性如下:

  element.on[type] = triggerFn addEventListener attachEvent
在冒泡阶段阻止 在捕获阶段阻止 在冒泡阶段阻止 在冒泡阶段阻止
stopPropagation() 除IE8及以下,其他均支持,且结果正确 支持,且结果正确 支持,且结果正确 不支持
cancelBubble 支持,且结果正确 支持,但只有FF正确 支持,且结果正确 支持,且结果正确

  使用时需要注意以下几点:

  1、虽然阻止事件传递分为W3C标准(stopPropagation())和IE标准(cancelBubble),但并不意味着该属性或方法为各自浏览器所所独有。测试表明,FF、Chrome等高级浏览器同样支持IE标准下的cancelBubble。

  2、若需要在捕获阶段阻止事件传递,使用addEventListener()进行事件监听,同时使用e.stopPropagation()阻止冒泡。

  3、若需要在冒泡阶段阻止事件传递,在兼容addEventListener()和attachEvent()的同时,为保险起见,需要对阻止事件传递方式进行兼容。以下仅表示在DOM2及事件模型下兼容方式:

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

阻止默认事件

  一些元素在一般状态下存在默认行为,如:

  对配置了href的<a>绑定单击事件fn1,点击后会首先执行fn1,但之后也会执行<a>标签的默认行为,即:跳转href指向的页面。

  对<form>中的<input type="submit">绑定单击事件fn2,点击后首先会执行fn2,之后再执行<input type="submit">的默认行为,即:提交表单数据。

  为解决元素默认事件对绑定事件的影响,我们可以采用event对象提供的方法进行处理。

preventDefault()

  preventDefault()是W3C标准下阻止元素默认事件的方法。

  【测试】使用DOM0事件模型进行绑定,测试preventDefault():

  在<a htrf = "http://www.baidu.com">上绑定单击事件,点击<a>,输出结果[FF]:

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  点击链接后,输出“点击了<a>”,且页面不进行跳转,说明阻止事件成功。

  测试兼容性后发现,仅IE8及以下浏览器不支持preventDetault()

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  【测试】使用DOM2事件模型addEventListener进行绑定,测试preventDefault():

  在<a htrf = "http://www.baidu.com">上绑定单击事件,点击<a>,输出结果[FF]:

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  测试发现,对于支持addEventListener的浏览器,无论捕获还是冒泡阶段都可以阻止默认事件。

  【测试】使用DOM2事件模型attachEvent进行绑定,测试preventDefault():

  在<a htrf = "http://www.baidu.com">上绑定单击事件,点击<a>,输出结果[IE8]:

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  测试发现,对于支持attachEvent的浏览器,均不支持e.preventDefault()

returnValue = false

  returnValue是IE标准下阻止元素默认事件的方法,设置returnValue = false表示阻止默认事件。

  【测试】使用DOM0事件模型进行绑定,测试returnValue:

  在<a htrf = "http://www.baidu.com">上绑定单击事件,点击<a>,输出结果[FF]:

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  点击链接后,输出“点击了<a>”,但页面进行跳转,说明阻止事件失败。

  测试兼容性后发现,IE8、Chrome、Safari、Opera设置returnValue=false时,会阻止元素的默认事件;而FF、IE9-11则不会阻止。

  

  【测试】使用DOM2事件模型addEventListener进行绑定,测试returnValue:

  在<a htrf = "http://www.baidu.com">上绑定单击事件,点击<a>,输出结果[FF]:

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  测试发现,对于支持addEventListener的浏览器:

  在捕获阶段:FF、IE9-11不会阻止默认事件,而Chrome、Opera、Safari会阻止。

  在冒泡阶段:IE9-11不会阻止默认事件,而FF、Chrome、Opear、Safari会阻止。

  【测试】使用DOM2事件模型attachEvent进行绑定,测试returnValue:

  在<a htrf = "http://www.baidu.com">上绑定单击事件,点击<a>,输出结果[IE8]:

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  测试发现,对于支持attachEvent的浏览器,returnVaule=false可以阻止默认事件。

总结

  综合测试结果,preventDefault和returnValue的兼容性如下(T:支持该属性或事件且结果正确;F:不支持该属性或事件或结果不正确:—:不支持该事件绑定方式):

函数名 事件绑定方式 事件流 FF Chrome Opera Safari 模拟IE8 模拟IE9 模拟IE10 IE11
preventDetault() element.on[type] = fn 冒泡 T T T T F T T T
addEventListener() 捕获 T T T T T T T
冒泡 T T T T T T T
attachEvent() 冒泡 F F F
returnValue=false element.on[type] = fn 冒泡 F T T T T F F F
addEventListener() 捕获 F T T T F F F
冒泡 F T T T F F F
attachEvent() 冒泡 T F F

  使用时需要注意以下几点:

  1、为兼容不同浏览器,可编写如下代码:

  [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡

  但实际上,这样也存在着雷区,对于IE9和IE10,支持addEventListener和attachEvent进行事件绑定,而对照上表,IE9和IE10在使用attachEvent进行绑定时,无法阻止默认事件。故应在事件绑定兼容时,优先检验addEventListener。

  2、以前一直将returnValue = false与return false混淆,此处应注意returnValue是IE标准下Event对象的属性,仅用于阻止元素的默认事件。而return false的作用范围更加广泛,如:阻止事件、跳出循环、返回对象等等,方便的一刀切容易出错,不可滥用。