开发者社区> 问答> 正文

DOM的事件流是什么?事件的触发过程是怎么样的?

DOM的事件流是什么?事件的触发过程是怎么样的?


【精品问答】前端面试手册

【精品问答】前端面试手册之JavaScript篇

展开
收起
前端问答 2019-12-11 08:03:03 1135 0
1 条回答
写回答
取消 提交回答
  • 前端问答小助手

    事件就是⽂档或浏览器窗⼝中发⽣的⼀些特定的交互瞬间,⽽事件流(⼜叫事件传播)描述的是从⻚⾯中接收事件的顺序。

    事件冒泡

    事件冒泡(event bubbling),即事件开始时由最具体的元素(⽂档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点。

    看如下例⼦:

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <body>
    <div></div>
    </body>
    </html>
    

    如果单击了⻚⾯中的

    元素,那么这个click事件沿DOM树向上传播,在每⼀级节点上都会发⽣,按照如下顺序传 播:

    1. div
    2. body
    3. html
    4. document

    事件捕获

    事件捕获的思想是不太具体的节点应该更早接收到事件,⽽最具体的节点应该最后接收到事件。事件捕获的⽤意在于在事件到达预定⽬标之前就捕获它。

    还是以上⼀节的html结构为例:

    在事件捕获过程中,document对象⾸先接收到click事件,然后事件沿DOM树依次向下,⼀直传播到事件的实际⽬标,即

    元素

    1. document
    2. html
    3. body
    4. div

    事件流

    事件流⼜称为事件传播,DOM2级事件规定的事件流包括三个阶段:事件捕获阶段(capture phase)、处于⽬标阶段(target phase)和事件冒泡阶段(bubbling phase)。

    image.png

    触发顺序通常为 1. 进⾏事件捕获,为截获事件提供了机会 2. 实际的⽬标接收到事件 3. 冒泡阶段,可以在这个阶段对事件做出响应

    2019-12-11 08:05:10
    赞同 1 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
fibjs 模块重构从回调到协程--陈垒 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载