如何在点击另一按钮时终止目标按钮的onclick事件？

问题 #

点击#terminateButton按钮时，希望#myButton被点击后不再弹出alert，同时移除它的onclick事件，但使用removeEventListener没有生效。

原代码

JavaScript

let element = document.getElementById("myButton");

element.onclick = a
document.getElementById("terminateButton").onclick = function () {
  element.innerHTML = "Does Nothing";
  element.removeEventListener('click',a)
};

function a(){
    alert('You clicked the button');
}

HTML

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <button id='myButton'>Shows alert</button>
    <button id='terminateButton'>Dont show alert when other button clicked</button>
    <script src="script.js"></script>
</body>
</html>

原因及解决办法 #

removeEventListener无效的核心原因是：onclick属于DOM0级事件绑定方式，而removeEventListener只能移除通过addEventListener（DOM2级）绑定的事件，两者不属于同一体系，因此无法互相干预。

下面是两种可行的解决方式：

方式一：直接清空onclick

既然是用onclick绑定的事件，直接将其设为null就能彻底移除绑定：

let element = document.getElementById("myButton");

element.onclick = a
document.getElementById("terminateButton").onclick = function () {
  element.innerHTML = "Does Nothing";
  element.onclick = null; // 直接清空onclick事件
};

function a(){
    alert('You clicked the button');
}

方式二：改用addEventListener绑定事件

如果想使用removeEventListener来移除事件，需要一开始就用addEventListener绑定，这样后续的移除操作才能生效：

let element = document.getElementById("myButton");

element.addEventListener('click', a); // 用DOM2级方式绑定事件
document.getElementById("terminateButton").onclick = function () {
  element.innerHTML = "Does Nothing";
  element.removeEventListener('click', a); // 此时移除操作有效
};

function a(){
    alert('You clicked the button');
}

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