Как в нативном JS занести Ивент в переменную чтоб удалить его если надо будет?

Question

[Pantene742]

В jQuery я могу при инициализации занести Ивент в переменную и потом вызвав у переменной
метод off() удалить прослушку ивента.

var clickRef = document.addEventListener("click", function(){
console.log('clicked');
  document.getElementById("demo").innerHTML = "Hello World!";
});

Если я делаю так то переменная clickRef = undefined.
У меня в компонентах Angular идет подписка на ивенты body... Компонент может дублироватся а может нет и мне надо после удаления компонента определенные подписки удалять. Короче Занести подписку на ивент в переменную и изменять его или удалять.

К примеру вот в стакблитсе я повесил два ивента на один елемент, как мне програмно удалить один из иментов но второй оставить ? https://stackblitz.com/edit/js-qpm9uu?file=index.js

Answer 1

[Алексей Уколов]

var clickRef = function() {
  console.log('clicked');
  document.getElementById("demo").innerHTML = "Hello World!";
};

document.addEventListener("click", clickRef);

...


document.removeEventListener("click", clickRef);

Comments

[Pantene742]

Что делать если подписку с одинаковим именем переменной(в которой хандлер) делает один и тот де компонент вызваный на странице дважды ? Но в одном надо удалить а в другом оставить ?

[Алексей Уколов]

Зависит от конкретного кода. Можно в свойство объекта записать через this.handler = () => {}, можно глобальный массив или объект обработчиков завести и обращаться по индексу / ключу.

[Алексей Уколов]

А может и вообще ничего делать не нужно - переменная живёт в своей области видимости и то, что потом создаётся ещё одна с тем же именем, первой никак не касается.

[Pantene742]

Алексей Уколов, Тесть метод компонента передавать в качестве хандлера можно попробовать ?
А когда хочу удалить то передавать его же опять и так я удалю обработку события только в этом компоненте ?

[Алексей Уколов]

Да.

[Pantene742]

Алексей Уколов, Спасибо.