js中重复绑定事件

最新推荐文章于 2024-09-14 11:11:16 发布

前端爱好者小米粒

最新推荐文章于 2024-09-14 11:11:16 发布

阅读量349

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_33039355/article/details/138500616

版权

文章探讨了在JavaScript中，如何在单个DOM元素上绑定多个事件处理器。使用`onclick`会覆盖之前的绑定，仅执行最后一个，而`addEventListener`则允许每个事件处理器独立执行。

摘要由CSDN通过智能技术生成

在同一元素上绑定多个事件,那么这些事件要如何执行呢?我们通过代码来看看

let node = document.getElementById('content_left')
node.onclick = function(){
    console.log(1)
}
node.onclick = function(){
    console.log(2)
}
node.onclick = function(){
    console.log(3)
}

我们来点击结点元素,运行后发现,控制台之打印出了3

所以,我们得到结论: 重复绑定同一个事件处理器到同一个元素，那么每次绑定都会覆盖前一次的绑定，导致事件处理器只执行最后一次绑定的逻辑。

那么,我们是否能实现每次绑定的事件都能执行呢?答案是可以的,我们来修改代码

let node = document.getElementById('content_left')
node.addEventListener('click', function(){
    console.log(1)
})
node.addEventListener('click', function(){
    console.log(2)
})
node.addEventListener('click', function(){
    console.log(3)
})

再次点击结点元素,发现分别打印出了1,2,3

所以,我们有了结论: 如果你想要绑定多个事件处理器到同一个事件上，你需要使用事件监听器addEventListener，这样每个事件处理器都会被调用。