强制解绑DOM元素绑定事件
众所周知, 使用addEventListener绑定的事件, 如果绑定的为匿名函数, 是无法使用removeEventListener进行解绑的, 如果想要解绑必须拿到匿名函数的引用.很遗憾的是在标准JavaScript的DOM规范中并没有一个API可以查看元素绑定的所有事件.
此时需要介绍一个Chrome DevTools的APIgetEventListeners(只能在Chrome、Firefox和 Safari的控制台中使用, 无法在源代码中直接调用)
下图为getEventListeners返回的数据结构
可以看出 listener 字段为函数的引用, 只要拿到这个就可以很方便的进行解绑了
简单的实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="test-btn">测试</button>
<script>
let testBtn = document.querySelector('#test-btn');
testBtn.addEventListener('click', () => {
console.log("点击了")
})
</script>
</body>
</html>
浏览器打开上方文件,打开控制台输入下方代码
let btn = document.querySelector("#test-btn");
window.getEventListeners(btn);
let btnEvents = getEventListeners(btn);
btn.removeEventListener("click",btnEvents.click[0].listener)
再次点击按钮, 事件已经移除了
扫一扫
459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
