DOM事件流理论

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元紊节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

DOM事件流分为3个阶段

1.捕获阶段

2.当前目标阶段

3.冒泡阶段

 

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

 

注意：

1. Js代码中只能执行捕获或者百泡其4的一个阶段。

2. onclick和attachEvent只能得到百泡阶段。

3.addEventListener(type,listener[,useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序;如果是 false(不写默认就是false )，表示在事件冒泡阶段调用事件处理程序。

4．实际开发中我们很少使用事件捕获，我们更关注事件冒泡

5．有些事件是没有百泡的，比如onblur.onfocus、onmouseenter、onmouseleave

6．事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件，我们后面讲解。

代码示范：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            background-color: pink;
            width: 500px;
            height: 500px;
        }

        .son {
            background-color: purple;
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
</body>
<script>
    // dom事件流三个阶段
    // 1.JS代码中只能执行捕获或者冒泡其中的一个阶段。
    // 2. onclick和attachEvent (ie)只能得到冒泡阶段。
    // 3.捕获阶段 如果addEventListener第三个参数是true 那么则处于捕获阶段 document -> html -> body -> father -> son
    // var son = document.querySelector('.son')
    // son.addEventListener('click', function () {
    //     alert('son')
    // }, true)
    // var father = document.querySelector('.father')
    // father.addEventListener('click', function () {
    //     alert('father')
    // }, true)
    // 4.冒泡阶段 如果addEventListener第三个参数是false或者省略 那么则处于冒泡阶段 son -> father -> body -> html -> document
    var son = document.querySelector('.son')
    son.addEventListener('click', function () {
        alert('son')
    }, false)
    var father = document.querySelector('.father')
    father.addEventListener('click', function () {
        alert('father')
    }, false)
    document.addEventListener('click', function () {
        alert('document')
    })
</script>

</html>

 

 

posted @ 2022-04-11 13:50  今天穿秋裤了吗  阅读(52)  评论(0)    收藏  举报