Как добавить и удалить прослушиватель событий с помощью функции с параметрами?

Извините, если это общий вопрос, но я не смог найти ответы, которые показались бы уместными при поиске.

Если я прикреплю слушателя события, как это:

window.addEventListener('scroll', function() { check_pos(box); }, false);

не похоже, чтобы попытаться удалить его позже, например:

window.removeEventListener('scroll', function() { check_pos(box); }, false);

Я предполагаю, что это потому, что методы addEventListener и removeEventListener хотят ссылаться на одну и ту же функцию, в то время как я предоставил им анонимные функции, которые, хотя и идентичны в коде, не являются буквально одинаковыми.

Как я могу изменить свой код, чтобы заставить работать вызов removeEventListener? Аргумент "box" относится к имени <iframe>, которое я отслеживаю на экране; то есть я хочу иметь возможность подписаться на событие scroll один раз для каждого моего <iframe> (количество варьируется), и как только функция check_pos() измеряет определенную позицию, она вызовет другую функцию, а также удалите прослушиватель событий, чтобы освободить системные ресурсы.

Я догадываюсь, что решение будет заключаться в закрытии и/или именовании анонимной функции, но я не совсем уверен, как это выглядит, и был бы признателен за конкретный пример.

Надеюсь, что это имеет смысл.

Ответ 1

Вы пытались сохранить ссылку на анонимную функцию (например, вы предложили)?

Итак:

var listener = function() {
  check_pos(box);
};

window.addEventListener('scroll', listener, false);
...
window.removeEventListener('scroll', listener, false);

Mozilla docs предлагает то же самое.

Ответ 2

var listener;

listener = function(){

if( window.target != anotherEvent.target )
{
    ...CODE where

    window.removeEventListener('click', listener , false);

};

window.addEventListener('click', listener ,false);

Ответ 3

document.getElementById("yourId").removeEventListener("click",yourfunction1);
document.getElementById("yourId").addEventListener("click",yourfunction2);

function yourfunction1(){
//write code here
alert(1);
}

function yourfunction2(){
//write code here
alert(2);
}

<button type="button" onclick="yourfunction1()" id="yourId">Button</button>