如何移除通过onclick绑定的JavaScript事件监听器

嘿，我来帮你搞定这个问题！你会发现原代码里的removeEventListener完全没用——这是因为通过onclick="func()"这种HTML属性绑定的事件，和addEventListener添加的事件不属于同一套机制：前者是DOM0级事件模型，后者是DOM2级事件模型，所以removeEventListener根本找不到对应的监听函数。

要移除这种通过HTML属性绑定的onclick事件，有几种简单有效的方法：

方法1：直接将onclick设为null #

这是最直接的方式，清空元素的onclick属性就能彻底移除绑定的函数：

<!DOCTYPE html>
<html>
<body>
<script>
function f1(){
 alert("f1");
}
function f2(){
 alert("f2");
 // 移除b1上的onclick事件
 document.getElementById("b1").onclick = null;
}
</script>
<button id="b1" type="button" onclick="f1()">B1</button>
<button id="b2" type="button" onclick="f2()">B2</button>
</body>
</html>

点击B2之后，再点B1就不会触发f1了。

方法2：替换或清空onclick属性值 #

如果你想替换原来的事件，直接给onclick赋值新函数就行（注意不要加括号，不然会立即执行）；或者设为空字符串，效果和设为null类似：

// 替换成新的点击事件
document.getElementById("b1").onclick = function() {
  alert("新的点击逻辑");
};

// 清空事件，等价于设为null
document.getElementById("b1").onclick = "";

为什么原代码无效？ #

当你用HTML属性onclick="f1()"绑定时，浏览器会把这个字符串解析成一个匿名函数，等价于：

document.getElementById("b1").onclick = function() {
  f1();
};

这个匿名函数和你定义的f1不是同一个引用，所以removeEventListener("click", f1)找不到对应的监听项，自然无法移除。

内容的提问来源于stack exchange，提问作者Rahul Yadav