点击按钮后删除EventListener

Question

我有一个第一个按钮，我在其中添加了一个事件监听器来执行 foo 函数。 foo 函数只是在控制台中显示一个数字。

我有第二个按钮用于删除添加的事件侦听器。

这里是代码，非常简单：

<input type="button" value="Click here" id="button">

<input type="button" value="Remove Event Listener" onclick="removeEventListener();">

<script type="text/javascript">

number = 0;

//Function to display number in console :
function foo()
{
    number = number+1;
    
    console.log(number);    
}

//The button :
button = document.getElementById("button");

//Add event listener to the button :
button.addEventListener("click", foo);

//Function to remove event listener :
function removeEventListener()
{
    button.removeEventListener("click", foo);   
}

</script>

你可以试试看：https://jsfiddle.net/6m8z8qgn/

但是当我点击第二个按钮移除事件监听器时， 添加到第一个按钮的事件侦听器不会被删除，因此当我单击第一个按钮时，控制台会再次显示数字。

一个想法？

Answer 1

将方法 removeEventListener 的名称更改为其他名称。否则它被称为 javascript 内部方法。

函数重命名This()

Answer 2

removeEventListener

是 JavaScript 中的保留关键字。

尝试别的东西。

<input type="button" value="Remove Event Listener" onclick="anotherName();">
<input type="button" value="Click here" id="button">
<script type="text/javascript">

number = 0;

//Function to display number in console :
function foo()
{
number = number+1;

console.log(number);    
}

//The button :
button = document.getElementById("button");

//Add event listener to the button :
button.addEventListener("click", foo);

//Function to remove event listener :
function anotherName()
{
    button.removeEventListener("click", foo);   
}