removeEventListener事件不起作用的问题及解决
更新时间:2026年03月29日 11:14:25 作者:平平无奇小码农qwq
文章指出在使用JavaScript的removeEventListener移除事件监听器时,应使用外部函数而非匿名函数,并强调了addEventListener和removeEventListener使用时的一些注意事项,例如在IE中使用attachEvent和detachEvent时不要传入匿名函数
removeEventListener事件不起作用
例子
给按钮添加点击事件
<button class="btn2">点我啊啊啊啊</button>
var btn2 = document.querySelector('.btn2');
btn2.addEventListener('click', function () {
alert('1111');
}, false);
btn2.removeEventListener('click', function () {
alert('1111');
}, false);
这样写的removeEventListener() 移除监听事件是不起作用的,要写成以下这种形式:
function showMsg() {
alert('1111');
}
// IE8及以下不支持
btn2.addEventListener('click', showMsg, false);
btn2.removeEventListener('click', showMsg, false);
因为removeEventListener的第二个参数要使用外部函数,如上例的showMsg,写成匿名函数function () { } 是不起作用的。
IE的attachEvent和detachEvent也不要传入匿名函数
注意
(1)addEventListener和removeEventListener的第三个参数默认就是false,可以不写。
(2)第一个参数 click前面不要加on,是click不是onclick。其他事件也是如此
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- Vue中使用addEventListener添加事件、removeEventListener移除事件的示例详解
- 关于js中removeEventListener取消事件监听的坑
- vue中的addEventListener和removeEventListener用法说明
- addEventListener()和removeEventListener()追加事件和删除追加事件
- 解决removeEventListener 无法清除监听的问题
- js中addEventListener()与removeEventListener()用法案例分析
- addEventListener()与removeEventListener()解析
相关文章
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
这篇文章主要介绍了jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法,结合实例形式分析了jQuery结合bootstrap插件实现的鼠标响应式提示框相关操作技巧,需要的朋友可以参考下2020-04-04
解决AjaxFileupload 上传时会出现连接重置的问题
这篇文章主要介绍了解决AjaxFileupload 上传时会出现连接重置的问题,需要的朋友可以参考下2017-07-07


最新评论