Supprimer l'écouteur d'événements qui a été ajouté à l'aide de bind (this)

Ce n'est pas possible avec votre implémentation actuelle - chaque appel de .bind crée une nouvelle fonction séparée, et vous ne pouvez appeler removeEventListener que pour supprimer un écouteur si la fonction passée est le même ( === ) que celui passé à addEventListener (tout comme .includes pour les tableaux, ou .has pour les ensembles):

<button is="my-el" type="button">Click me</button>

class MyEl extends HTMLButtonElement {
  constructor() {
    super();
    this.clickCount = 0;
    this.boundListener = this.clickHandler.bind(this);
    window.addEventListener('click', this.boundListener);
  }
  
  clickHandler(e) {
    this.textContent = `clicked ${++this.clickCount} times`;
    window.removeEventListener('click', this.boundListener);
  }
}

customElements.define('my-el', MyEl, { extends: 'button' });

const fn = () => 'foo';
console.log(fn.bind(window) === fn.bind(window));

Créez un wrapper func pour votre clickHandler comme ceci.

<button is="my-el" type="button">Click me</button>

class MyEl extends HTMLButtonElement {
  constructor() {
    super();
    this.clickCount = 0;
    this.wrapper = e => this.clickHandler.apply(this, e);
    window.addEventListener('click', this.wrapper);
  }
  
  clickHandler(e) {
    this.textContent = `clicked ${++this.clickCount} times`;
    
    window.removeEventListener('click', this.wrapper);
  }
}

customElements.define('my-el', MyEl, { extends: 'button' });

Un autre modèle consiste à conserver votre écouteur à l'intérieur du constructeur.

Pour supprimer un écouteur d'événement (quel que soit le modèle), vous pouvez ajouter un "remove" function au moment où vous créez un Event Listener.

Puisque la fonction de suppression est appelée dans la portée listen , elle utilise la fonction même nom et function

pseudo code:

<button id="One" is="my-el" type="button">Click me</button>
<button onclick="One.mute()">Mute</button> 
<button onclick="One.eol()">Delete</button> 
<br>
<button id="Two" is="my-el" type="button">Click me too</button>
<button onclick="Two.disconnectedCallback()">Mute</button> 
<button onclick="Two.eol()">Delete</button> 

Exécutez l'extrait de code ci-dessous pour le voir utilisé avec plusieurs boutons

Les événements bouillonnent UP & shadowDOM

pour vous faire gagner une heure une fois que vous le faites plus avec des événements ...

Notez que les WebComponents (c'est-à-dire CustomElements avec shadowDOM) ont besoin de CustomEvents avec la propriété compose: true si vous veulent qu'ils passent vers le haut au-delà de sa limite shadowDOM

button{
  width:12em;
}

Suppression des écouteurs d'événements ajoutés

Remarque: cet exemple ne fonctionne pas sur Safari, car Apple refuse de mettre en œuvre l'extension d'élem ents: étend HTMLButtonElement

class MyEl extends HTMLButtonElement {
  constructor() {
    let ME = super();// super() retuns this scope; ME makes code easier to read
    let count = 0;// you do not have to stick everything on the Element
    ME.mute = ME.listen('click' , event => {
      //this function is in constructor scope, so has access to ALL its contents
      if(event.target === ME) //because ALL click events will fire!
        ME.textContent = `clicked ${ME.id} ${++count} times`;
      //if you only want to allow N clicks per button you call ME.mute() here
    });
  }

  listen(name , func){
    window.addEventListener( name , func );
    console.log('added' , name , this.id );
    return () => { // return a Function!
      console.log( 'removeEventListener' , name , 'from' , this.id);
      this.style.opacity=.5;
      window.removeEventListener( name , func );
    }
  }
  eol(){ // End of Life
    this.parentNode.removeChild(this);
  }
  disconnectedCallback() {
      console.log('disconnectedCallback');
      this.mute();
  }
}

customElements.define('my-el', MyEl, { extends: 'button' });

    new CustomEvent("check", {
      bubbles: true,
      //cancelable: false,
      composed: true       // required to break out of shadowDOM
    });

  listen(name , func){
    window.addEventListener(name, func);
    return () => window.removeEventListener( name , func );
  }

  let remove = listen( 'click' , () => alert('BOO!') );

  //cleanup:
  remove();

Notes:

• count n'est pas disponible en tant que this.count mais est disponible pour toutes les fonctions définies dans la portée du constructeur. Donc c'est (un peu) privé, seule la fonction clic peut le mettre à jour.

• onclick = Two.disconnectedCallback () à titre d'exemple, cette fonction ne supprime PAS l'élément.