Javascript: removeEventListener не работает

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.

функция renameThis()

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); 
}