理解事件流

事件流描述的是从页面中接收事件的顺序。但有意思的是,IE和Netscape开发团队居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流,而Netscape Communicator是事件捕获流。

  • 事件冒泡
    IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。以下面的HTML页面为例:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="div">
            click me
        </div>
    </body>
</html>

如果你点击了页面中的<div>元素,那么这个click事件会按照如下顺序传播:
<ol>
<li><div></li>
<li><body></li>
<li><html></li>
<li>document</li>
</ol>

  • 事件捕获
    Netscape团队提出了另一种事件流叫做事件捕获。事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件,事件捕获的用意在于在事件到达预定目标之前捕获它。
    仍以前面的为例,那么单击<div>元素就会以下列顺序触发click事件。
    <ol>
    <li><document></li>
    <li><html></li>
    <li><body></li>
    <li><div></li>
    </ol>

DOM事件流

  • "DOM2级事件"规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件。最后的阶段是冒泡阶段可以在这个阶段对事件做出响应。
  • 在DOM事件流中,实际的目标元素(<div>元素)在捕获阶段不会接收到事件。这意味着在捕获阶段事件就停止了,下一个阶段是“处于目标”阶段,于是事件在<div>上发生,并在事件处理中被看成冒泡阶段的一部分。然后,冒泡阶段发生,事件又传播回文档。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 事件流 定义:1.事件流描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。2.事件就是用户或浏览器...
    murphywuwu阅读 3,269评论 4 4
  • ** 定义:**事件:用户或浏览器自身执行的某种动作。事件流:描述的是从页面中接收事件的顺序,也可理解为事件在页面...
    zouyang0921阅读 3,674评论 0 0
  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 5,030评论 3 11
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 8,186评论 1 10
  • 有一富豪买了块地,修了别墅,后院更有多棵百年荔枝树,当初买地时他看中了的是这些荔枝树,因为他老婆喜欢吃荔枝。 装修...
    马唐阅读 3,582评论 0 0

友情链接更多精彩内容