如何使用removeEventListener删除事件？

Question

HTML

<button id="btn" value="250">Click Me</button>

JS

document.getElementById('btn').addEventListener('click',say,false);

function say() {
 alert("this is add function !!!");
 this.removeEventListener('click',function () {
  alert("this is remove function");
  },false);
} 

I want that functionality on my button that if user click first time than alert box show "this is add function" but second time click than alert bix show "this is remove function" & third time again show "this is a add function" , this will continue.

Answer 1

Keep a counter isntead of adding and removing event listeners.

 document.getElementById('btn').addEventListener('click',say,false); var ctr = 0; function say() { if(ctr%2 == 0) { ctr = 1; alert("this is add function !!!"); } else { ctr= 0; alert("this is remove function"); } } 

 <button id="btn" value="250">Click Me</button> 

Answer 2

You dont need to remove the eventlistener, just to change the text of the alert - in both alarms you need an event listener on the click.

you can keep a flag or something

document.getElementById('btn').addEventListener('click',say,false);
var showAddText = true;
function say() {
    var alertText = showAddText ? 'this is add function' : 'this is remove function'
    showAddText = !showAddText;
    alert(alertText);
} 

if you want to practice removeEventListener -

document.getElementById('btn').addEventListener('click',say,false);
function say() {
    alert('this is add function');
    document.getElementById('btn').removeEventListener('click',say,false);
    document.getElementById('btn').addEventListener('click',say2,false);
} 
function say2(){
    alert('this is remove function');
    document.getElementById('btn').removeEventListener('click',say2,false);
    document.getElementById('btn').addEventListener('click',say,false);

}