javascript - why doesn't removeEventListener work? -

i'm not sure what's wrong here, testing in chromium , firefox, find i'm doing wrong respect removing eventlistener element in javascript.

the context canvas game. @ first, there's splash screen shown click begin game. after click begin, want remove listener.

the main point of interest removeeventlistener in startgame function. doesn't throw error. , code executes (i see game starting message in console , can see "this" game instance). i'm totally confused why if keep on clicking on canvas runs startgame each time. expected behavior clicking there nothing once eventlistener removed.

help!

function game(canvas) {   this.c = canvas;   this.ctx = this.c.getcontext("2d");   this.c.width = canvas_width;   this.c.height = canvas_height;    // background image   this.bgready = false;   this.bgimage = new image();   this.bgimage.onload = function () {     window.g.bgready = true;   };   this.bgimage.src = main_background; }   game.prototype.setsplash = function() {   if (this.bgready) {     this.ctx.drawimage(window.g.bgimage, 0, 0);     this.ctx.font="48px helvetica";     this.ctx.textalign = "center";     this.ctx.fillstyle="rgb(0,0,255)";     this.ctx.filltext("click start",310,240);     document.getelementbyid("cnvs").addeventlistener(       'click',this.startgame.bind(this),true);   } else {     // since setsplash function     // wait bit background image , try again     settimeout(this.setsplash.bind(this),100);     console.log("bgimage not ready...");   } }  game.prototype.startgame = function() {   console.log("game starting ...");   console.log(this);    // step 1, remove click listener function    // why isn't working?!   document.getelementbyid("cnvs").removeeventlistener(     'click',this.startgame,true); } ... // other stuff ... function initialize() {   // canvas   var c = document.getelementbyid("cnvs");    // create game object   window.g = new game(c);    // set splash page   g.setsplash(); } window.onload=initialize; 

further info:

i had version non-working removal written as:

this.c.removeeventlistener('click',this.startgame,true); 

same behavior code referenced above.

---

edit: in reply first answer mczepiel

i'm trying implement answer this:

typer.prototype.setsplash = function() {   if (this.bgready) {     this.ctx.drawimage(window.t.bgimage, 0, 0);     this.ctx.font="48px helvetica";     this.ctx.textalign = "center";     this.ctx.fillstyle="rgb(0,0,255)";     this.ctx.filltext("click start",310,240);     var boundfunction = this.startgame.bind(this);     document.getelementbyid("cnvs").addeventlistener(       'click',boundfunction,true,boundfunction);   } else {     // since setsplash function      // wait bit background image , try again      settimeout(this.setsplash.bind(this),100);     console.log("bgimage not ready...");   } }  typer.prototype.startgame = function(boundfunction) {   console.log("game starting ...");   console.log(this);  // strangely, object rather                        // game, still has properties of                        // game tho    // step 1, remove click listener function    // still isn't working...    document.getelementbyid("cnvs").removeeventlistener(     'click',boundfunction,true); } 

i think understood suggestion, perhaps not. code above still doesn't remove listener. appreciated.

you'll need store reference result of calling this.startgame.bind(this) , pass same value both addeventlistener , removeeventlistener

the remove call expecting remove exact same object added listener.

likely duplicate of removeeventlistener not working , others if want see same issue in various flavors.

edit untested off-the-cuff suggestion:

typer.prototype.setsplash = function() {   if (this.bgready) {     // draw stuff      var canvaselement = document.getelementbyid("cnvs");     var dismisssplash = function (evt) {         canvaselement.removeeventlistener('click', dismisssplash, true);         this.startgame();     }.bind(this);      canvaselement.addeventlistener('click', dismisssplash, true);   } else {         // try show splash later     } }  typer.prototype.startgame = function() {     // start game }