JS事件详解(一) —— 事件流

最新推荐文章于 2022-04-14 14:37:31 发布

这个夏天有阳光

最新推荐文章于 2022-04-14 14:37:31 发布

阅读量849

点赞数 3

分类专栏： JavaScript 文章标签： javascript 事件流

本文链接：https://blog.csdn.net/bingo_wangbingxin/article/details/79122410

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript与HTML之间的交互是通过事件实现的，而用户与浏览器页面的互动也是通过事件来实现的
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间，所以分为两种事件，一是发生在浏览器对象（BOM）上的事件，一是发生在文档对象（DOM）上的事件

事件流

当页面中放了一个按钮，你用鼠标点击这个按钮的，虽然你只是点击了这个按钮，但其实你也同时点击了这个按钮的所有父级元素
事件流描述的是从页面中接受事件的顺序

事件冒泡

事件冒泡是目标元素接受事件，然后逐级向上传播到顶级元素为止
如下示例：

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div>click me</div>
</body>
</html>

点击div元素，click事件会沿着DOM树向上传播，在每一级节点都会发生，冒泡顺序为：div -> body -> html -> document
PS：ie8及以上浏览器冒泡的顶级对象为document，而其他浏览器冒泡的顶级对象为window

事件捕获

事件捕获与事件冒泡是相反的，是顶级元素先接收到事件，再逐级向下传播到目标元素为止
同样是以上示例，document对象会先接收到click事件，然后沿着DOM树向下传播到事件的目标元素，捕获顺序为：document -> html -> body -> div，浏览器都是从window对象开始捕获的
PS：所有浏览器都支持事件冒泡，但ie8及以上浏览器不支持事件捕获，所以尽量减少使用事件捕获

事件流

在实际中，事件流包括了三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段，当点击一个div元素时，以下就是事件流的顺序：
1. 顶级对象（window）接收到click事件，然后逐级向下捕获
2. 目标元素（div）接收到到事件
3. 对事件做出响应，逐级向上冒泡到顶级对象

接下来通过几个示例来说明，点击div3

<div class="div1">
      <div class="div2">
        <div class="div3"></div>
      </div>
    </div>
    <script>
    var div1=document.querySelector(".div1")
    var div2=document.querySelector(".div2")
    var div3=document.querySelector(".div3")
    div1.addEventListener('click',function(){ console.log(1) },false)
    div2.addEventListener('click',function(){ console.log(2) },false)
    div3.addEventListener('click',function(){ console.log(3) },false)
    </script>

打印结果：3 2 1

<div class="div1">
      <div class="div2">
        <div class="div3"></div>
      </div>
    </div>
    <script>
    var div1=document.querySelector(".div1")
    var div2=document.querySelector(".div2")
    var div3=document.querySelector(".div3")
    div1.addEventListener('click',function(){ console.log(1) },true)
    div2.addEventListener('click',function(){ console.log(2) },true)
    div3.addEventListener('click',function(){ console.log(3) },true)
    </script>

打印结果：1 2 3

<div class="div1">
      <div class="div2">
        <div class="div3"></div>
      </div>
    </div>
    <script>
    var div1=document.querySelector(".div1")
    var div2=document.querySelector(".div2")
    var div3=document.querySelector(".div3")
    div1.addEventListener('click',function(){ console.log(1) },false)
    div2.addEventListener('click',function(){ console.log(2) },true)
    div3.addEventListener('click',function(){ console.log(3) },false)
    </script>

打印结果：2 3 1

<div class="div1">
      <div class="div2">
        <div class="div3"></div>
      </div>
    </div>
    <script>
    var div1=document.querySelector(".div1")
    var div2=document.querySelector(".div2")
    var div3=document.querySelector(".div3")
    div1.addEventListener('click',function(){ console.log(1) },true)
    div2.addEventListener('click',function(){ console.log(2) },false)
    div3.addEventListener('click',function(){ console.log(3) },true)
    </script>

打印结果：1 3 2

以最后一个示例来说明一下：
点击div3元素，click事件开始从window对象开始向下捕获，事件传播到div1元素，div1元素是事件捕获时触发，所以打印1，在继续向下传播到div2，可div2是事件冒泡时触发，所以没有触发事件，再向下就是目标对象div3，然后事件开始向上冒泡，div3是冒泡时触发，所以打印3，再继续向上传播到div2，div2是事件冒泡时触发，所以打印2，最终打印的结果顺序为132