How to removeEventListener in addEventListener?

Question

I had a addEventListener that will triggered multiple times depends on the number of click, how do to make sure it only run once? I tried using removeEventListener but it did not run at all.

Any help and suggestions are appreciated. Thanks in advance :)

Provider.ts

addInfoWindow(marker,ListingID){

this.http.get(this.baseURI + '/infoWindow.php?id=' + ListingID)
  .map(res => res.json())
  .subscribe(Idata => {

    let infoData = Idata;

      let content = "<ion-item>" + 
     "<h2 style='color:red;'>" + infoData['0'].ListingTitle + "</h2>" + 
     "<p>" + infoData['0'].ListingDatePosted + ' ' + infoData['0'].ListingStartTime + "</p>" +
     "<p> Salary: $" + infoData['0'].ListingSalary + "</p>" +
     '<p id="' + infoData['0'].ListingID + '">Apply</p>'
     "</ion-item>";    

  console.log("CREATING INFOWINDOW WITH CONTENT");
 let infoWindow = new google.maps.InfoWindow({

 content: content

 });

  google.maps.event.addListener(infoWindow, 'domready', () => { 

  let goInfoPage = document.getElementById(infoData['0'].ListingID);

    console.log("GETTING PAGE ID");

    //let it run only once, currently will increment by 1 if infoWindow if closed and reopen
  goInfoPage.addEventListener('click', () => {

    let pushData = infoData['0'];

    console.log("GETTING PAGE DATA");

    let nav = this.app.getActiveNav();

    console.log("PUSHHING TO PAGE");

    nav.push('StoreInfoPage',{'record':pushData});

  }) 

 goInfoPage.removeEventListener('click', () => {      
  console.log("REMOVE EVENT LISTENER"); // did not run
  });

 });


google.maps.event.addListener(marker, 'click', () => {
console.log("MARKER CLICKED, OPENING INFOWINDOW");
infoWindow.open(this.map, marker); 

  });


 });

}

what exactly do you want? call `removeEventListener` inside the callback to `addEventListener` and pass it the reference to the function you used in the `addEventListener` — Max Koretskyi, Aug 02 '17 at 17:56

score 12 · Accepted Answer · answered Aug 02 '17 at 18:05

removeEventListener accepts a function that was previously added as a listener with addEventListener, not a callback. For this reason it is not practical to use anonymous functions as listeners - they cannot be removed.

This is common JavaScript knowledge that isn't specific to Angular:

const onClick = () => {
  ...
  goInfoPage.removeEventListener('click', onClick);
});

goInfoPage.addEventListener('click', onClick);

Angular applications conventionally rely on RxJS, it can be:

import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/first';

...
Observable.fromEvent(goInfoPage, 'click').first().subscribe(() => {
  ...
});

Listener removal is handled by RxJS.

Note that the `once` option allows to avoid removing the event listener explicitly: `goInfoPage.addEventListener('click', onClick, {once: true});`. https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener — Sylvain Lesage, Sep 04 '20 at 16:39

score 3 · Answer 2 · answered Aug 02 '17 at 18:02

You have to pass the function to removeEventListener as the following:

let div = document.getElementById("myDiv");

let coolFunction = () => {
    console.log("Hello World");
    div.removeEventListener("click", coolFunction);
}

div.addEventListener("click", coolFunction);

How to removeEventListener in addEventListener?

2 Answers2