关于addEventListener选项对象参数passive的理解

最新推荐文章于 2024-08-27 15:41:08 发布

星海拾遗

最新推荐文章于 2024-08-27 15:41:08 发布

阅读量2k

点赞数 2

分类专栏：生命不息，填坑不止

本文链接：https://blog.csdn.net/qq_38280242/article/details/108411169

版权

生命不息，填坑不止专栏收录该内容

47 篇文章 1 订阅

订阅专栏

很久很久之前的addEventListener基本语法

addEventListener(type, listener, useCapture)

目前现行最新的addEventListener基本语法

addEventListener(type, listener, [useCapture])

addEventListener最常见的用法（直接举栗子）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div" style="width:100%;height:2000px;background:lavender"></div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        document.addEventListener('scroll',function(event){
            console.log(1)
        })
    </script>
</body>

</html>

进一步给addEventListener加参数改写代码如下

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div" style="width:100%;height:2000px;background:lavender"></div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        document.addEventListener('click',function(event){
            console.log("document被点击啦！")
        },false)
        document.getElementById("div").addEventListener("click",function(){
            console.log("div被点击啦！")
        })
    </script>
</body>

</html>

给document的点击监听事件加上了第三个参数false，其实这样写和不加第三个参数效果是一样的，第三个参数的默认值就是false，它表示是否在事件捕获阶段触发函数。false就是浏览器的默认行为，在事件冒泡阶段触发函数。这里多提一句事件捕获和冒泡的区别（虽然我觉得没必要），简而言之，事件捕获是先执行父元素的事件再执行子元素的事件。事件冒泡则相反。我们丢在浏览器中看看效果。

和浏览器默认行为没有区别。此时将参数修改成true，再来看看页面表现。

 document.addEventListener('click',function(event){
            console.log("document被点击啦！")
        },true)

最近一次的DOM修订中对addEventListener的参数进行了修改，第三个参数允许传入一个对象。我们来看看第二个参数once的功能。顾名思义。监听器只执行一次然后移除。因为在实际的业务需求中，只允许事件只触发一次的场景是很常见的（比如领取优惠券），放在以前，我们得先addEventListener然后再removeEventlistener。在最新的dom标准中可以使用addEventListener第三个参数中的once实现同样的功能。直接看栗子。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div" style="width:100%;height:2000px;background:lavender"></div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        document.getElementById("div").addEventListener("click", function () {
            console.log("div被点击啦！")
        }, { capture: false, once: true })
    </script>
</body>

</html>

页面表现如下

此时不管点击多少次，监听函数只会触发一次。

最后也就是本文重点关于参数passive的理解了。

我们先来举一个实际场景中的栗子。在移动端设备中，拖动类的验证码是很常见的。此时我们只想拖动滑块到指定位置。触发事件为touchstart，但是移动端设备中touchstart的默认行为是拖动页面。此时我们并不想拖动页面。使用event.preventDefault()来阻止默认行为。然而实际情况是。这一类的特殊情况出现的频率是少之又少的，在80的情况下我们并不需要执行event.preventDefault()来阻止默认行为。但是事件监听器只有在执行完整个监听函数之后才知道此次事件没有event.preventDefault()，不需要阻止默认行为。然而，执行函数是需要时间的。而这一点点时间。往往就会影响用户的交互体验。新的DOM标准将passive写入规范，表示此次事件监听器不会阻止事件的默认行为，而passive:true也是参数的默认值。