Javascript удалитьEventListner внутри обратного вызова? - PullRequest
1 голос
/ 27 сентября 2019

Как добавитьEventListener, который будет срабатывать только один раз + передавая ему аргументы?

function () {
    var params = ...

    elem.addEventListener('load', function(event, params) {
        elem.removeEventListner('load', ...);
        do_something(params)
    }
}

Ответы [ 3 ]

2 голосов
/ 27 сентября 2019

при использовании addEventListener вы можете предоставить объект конфигурации в качестве второго аргумента, где вы можете указать, что он должен запускаться один раз (как в коде ниже).Что касается передачи дополнительного аргумента в ваш обратный вызов события, вы можете использовать метод bind, предоставив контекст и дополнительный аргумент

var button = document.querySelector('#btn');


button.addEventListener('click', function (params, ev) {
  
  console.log(params);
  
}.bind(button, { name: 'test'}), {
  once: true
})
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

</head>
<body>
 <button id="btn">click</button>
</body>
</html>
1 голос
/ 27 сентября 2019

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

function bindListener(elem, params) {
    var listener = function() {
        do_something(params);
        elem.removeEventListener('load', listener);
    }
    elem.addEventListener('load',listener);
}
1 голос
/ 27 сентября 2019

Если вы называете свою анонимную функцию, вы можете ссылаться на нее внутри:

function () {
    var params = ...

    elem.addEventListener('load', function callback(event, params) {
        elem.removeEventListner('load', callback);
        do_something(params)
    }
}

Она не попадет в глобальную область видимости, поэтому вы сможете назвать все ваши «одноразовые» события callback.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...