📋 随手记 - 事件监听 - addEventListener - 《📝 前端笔记分享》

参考 MDN：→ https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
参看文章：→ 移动Web滚动性能优化: Passive event listeners

addEventListener 用来页面的监听事件

常用语法是这样的

target.addEventListener(type, listener, options);

第一个参数表示监听事件类型的字符串
第二个参数一般使用一个函数作为回调
第三个参数可选，一般使用对象表示

<body>
    <div class="test">Hello</div>
</body>
<script>
    const div = document.querySelector('.test')
    div.addEventListener('click',()=>{console.log('我被点击了')})
</script>

event.preventDefault() 和 event.stopPropagation() 用于阻止默认事件和冒泡事件

<body>
    <div class="parent">
        <a href="http://www.baidu.com">百度链接</a>
    </div>
</body>
<script>
    const div = document.querySelector('.parent')
    div.addEventListener('click', () => { console.log('我被点击了') })
    const aLabel = document.querySelector('a')
    aLabel.addEventListener('click', (event) => {
        console.log('我要阻止默认事件和冒泡事件')
        event.preventDefault()
        event.stopPropagation()
    })
</script>

点击 a 标签后，它不会跳转页面，也不会把点击事件传递给它的父元素

我们看一看触发事件后的「target」属性和「currentTarget」属性，这里监听父元素，因为冒泡事件的存在，当子元素被点击时，也会触发事件

<body>
    <div class="parent">父元素
        <div class="son">子元素</div>
    </div>
</body>
<script>
    const parent = document.querySelector('.parent')
    const son = document.querySelector('.son')
    parent.addEventListener('click', (event) => {
        console.log(event.target)
        console.log(event.currentTarget)
    })
</script>

这里有一个结论：event.currentTarget 是被监听的元素，event.target 是触发事件的元素

当点击子元素时，event.target 为子元素，event.currenTarget 为父元素
当点击父元素时，event.target 为父元素，event.currenTarget 为父元素

「passive」用于提升移动端的性能

passive 设置为 true 时，表示 listener 永远不会调用 preventDefault()，如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告

原理是这样的，当 passive 为默认值 false 时，浏览器会额外耗费一定时间检查是否调用了 preventDefault() ，passive 设置为 true 明确告诉浏览器，我不调用 preventDefault()，从而提升了性能

「@浪里淘沙的小法师」