Web APIs -------------- 事件流

最新推荐文章于 2023-07-19 10:01:43 发布

你大可不必.

最新推荐文章于 2023-07-19 10:01:43 发布

阅读量116

点赞数

文章标签：前端 javascript html5 css3

本文链接：https://blog.csdn.net/weixin_65777478/article/details/125577100

版权

事件流

事件流是对事件执行过程的描述，了解事件的执行过程有助于加深对事件的理解，提升开发实践中对事件运用的灵活度。

如上图所示，任意事件被触发时总会经历两个阶段：【捕获阶段】和【冒泡阶段】。

简言之，捕获阶段是【从父到子】的传导过程，冒泡阶段是【从子向父】的传导过程。

捕获和冒泡

<!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{
            width: 200px;
            height: 200px;
            background-color:  pink;
        }

        .son{
            width: 100px;
            height: 100px;
           background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        //事件流-- 事件捕获 从外到里 123
           document.addEventListener('click',function () {
               console.log(1);
           },true)

           document.querySelector('.father').addEventListener('click',function () {
               console.log(2);
           },true)

           document.querySelector('.son').addEventListener('click',function () {
               console.log(3);
           },true)


    </script>
</body>
</html>

执行上述代码后发现，当单击事件触发时，其祖先元素的单击事件也【相继触发】,这就是捕获阶段

<!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{
            width: 200px;
            height: 200px;
            background-color:  pink;
        }

        .son{
            width: 100px;
            height: 100px;
           background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        //事件流-- 事件冒泡 从里到外  321
           document.addEventListener('click',function () {
               console.log(1);
           },false)

           document.querySelector('.father').addEventListener('click',function () {
               console.log(2);
           },false)

           document.querySelector('.son').addEventListener('click',function () {
               console.log(3);
           },false)


    </script>
</body>
</html>

如果事件是在冒泡阶段执行的，我们称为冒泡模式，它会先执行子盒子事件再去执行父盒子事件，默认是冒泡模式(false)。

阻止冒泡

阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。

<!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{
            width: 200px;
            height: 200px;
            background-color:  pink;
        }

        .son{
            width: 100px;
            height: 100px;
           background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        //事件流-- 事件冒泡 从里到外  321
           document.addEventListener('click',function () {
               console.log(1);
           },false)

           document.querySelector('.father').addEventListener('click',function (e) {
               console.log(2);
               e.stopPropagation()
           },false)

           document.querySelector('.son').addEventListener('click',function (e) {
               console.log(3);
               e.stopPropagation()
           },false)


    </script>
</body>
</html>

结论：事件对象中的 ev.stopPropagation 方法，专门用来阻止事件冒泡。

鼠标经过事件：

mouseover 和 mouseout 会有冒泡效果

mouseenter 和 mouseleave 没有冒泡效果 (推荐)

事件委托

事件委托是利用事件流的特征解决一些现实开发需求的知识技巧，主要的作用是提升程序效率。

大量的事件监听是比较耗费性能的，如下代码所示

其他事件

页面加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

有些时候需要等页面资源全部处理完了做一些事情

监听页面所有资源加载完毕：

window.addEventListener('load', function() {
    // xxxxx
})

元素滚动事件

滚动条在滚动的时候持续触发的事件

window.addEventListener('scroll', function() {
    // xxxxx
})

页面尺寸事件

会在窗口尺寸改变的时候触发事件：

window.addEventListener('resize', function() {
    // xxxxx
})