Bloguons JavaScript

Parce que je me dis tout le temps : « Faut que j'écrive ça quelque part. »
Home

Aller au menu | Aller à la recherche

Javacript - La suppression des événements avec removeEventListener() au lieu de $.off()

, 20:45 - Lien permanent

L'affaire qui se passe, c'est que $(el).on() ne fait pas seulement la même chose que el.addEventListener(). $(el).on() enregistre aussi l'événement dans une liste d'événements d'un certain type (ex:'click') pour que si jamais on fasse $.off() sur le même type d'événement, ça puisse les effacer.

Une façon de faire pour effacer tous les événements possibles sur un élément serait el.outerHTML=el.outerHTML; ... sauf que ça supprime TOUS les événements de TOUS les types.

Idéalement, 2 trucs:

  • Soit on nomme l'événement (autrement dit, une fonction qu'on retient dans une variable) :
    var el = document.querySelector('textarea');
    var foo = () => console.log('Allô!');
    el.addEventListener('click', foo); // ajoute
    el.removeEventListener('click', foo); // enlève
    
  • Soit on attache l'événement à son élément parent, au pire à document.body (live binding) :
    document.body.addEventListener('click', e => {
        const el = e.target.closest('textarea'); 
        if (!el) return;
        console.log('Allô!');
    }