JS中的监听

什么是监听

监听简单说就是绑定事件,用addEventListener() 来绑定事件监听函数

监听是为了干什么呢

是为了使JavaScript代码与HTML标签分离,文档结构清晰,便于管理和开发。

监听有什么好处呢

(1)可以绑定多个事件
常规的事件绑定只执行最后绑定的事件。
(2)可以解除相应的绑定

监听的语法

element.addEventListener(event, function, useCapture)

event : (必需)事件名,支持所有DOM事件。
function:(必需)指定要事件触发时执行的函数。
useCapture:(可选)指定事件是否在捕获或冒泡阶段执行。true,捕获。false,冒泡。默认false。

简单实现

var elem = document.getElementById("test");
elem.addEventListener("click",aa,false);    //click 代表的是事件,  aa代表事件触发执行的函数

function aa(){
    alert("aa");
}
在JavaScript中,事件监听器可以用来捕获和处理特定事件的触发。当我们在代码中多次添加相同类型的事件监听器时,会导致多次叠加的现象。 这种多次叠加的原因通常有两种情况: 1. 重复绑定事件监听器:如果我们使用了重复的代码来绑定同一事件监听器,那么每次执行该代码时都会添加一个新的监听器,导致相同事件的多个监听器同时生效。比如,我们在一个按钮上绑定了一个点击事件监听器,在某些情况下,可能多次调用了绑定事件的代码,导致了多个相同的事件监听器叠加。 2. 绑定事件时没有正确解绑:如果我们在代码中添加了事件监听器,但是没有正确解绑该监听器,那么每次执行绑定代码时都会添加一个新的监听器。例如,我们在页面加载时绑定了一个滚动事件监听器,但是在页面销毁时没有解绑该监听器,那么每次重新加载页面时都会添加一个新的滚动事件监听器,导致多次触发相同的事件。 为避免这种多次叠加的情况,我们应该注意以下几点: 1. 在绑定事件监听器之前,先判断是否已经存在相同类型的监听器,如果已经存在,则不再重复绑定。 2. 在解绑事件监听器之前,先判断是否已经绑定了该监听器,如果没有绑定,则不需要解绑。 3. 当不再需要事件监听器时,要确保正确地解绑该监听器,以避免造成多次叠加。 总结来说,JavaScript中监听多次叠加的原因是重复绑定事件监听器和未正确解绑监听器。我们应该在编写代码时注意避免这些问题的发生,以保证事件监听的正确性。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值