Как используя addEventListener передать параметр в функцию?

Question

[Назар Линовецкий]

element.addEventListener('click', someFunk);
Как передать параметры в функцию someFunk?

Answer 1

[Alexey]

// Вариант 1. Привязываем контекст и первые по порядку параметры
function someFunk(a, b, event) {
	console.log(a, b, event);
}
element.addEventListener('click', someFunk.bind(null, 1, 2));

// Вариант 2. Используем интерфейс EventListener
function someFunk(event) {
	console.log(this.a, this.b, event);
}
element.addEventListener('click', {handleEvent: someFunk, a: 1, b: 2});

Comments

[Mesuti]

Спасибо!

[pandaa]

Alexey, А как тогда удалить?

function someFunk(a, b, event) {
console.log(a, b, event);
}

document.body.addEventListener('click', someFunk.bind(null, 1, 2));	

document.body.removeEventListener('click', someFunk); //не работает

[Alexey]

bind() возвращает функцию, ее и надо использовать в качестве параметра

let boundSomeFunc = someFunc.bind(null, 1, 2);
element.addEventListener('click', boundSomeFunc);
element.removeEventListener('click', boundSomeFunc);

[Даниил]

Спасибо тебе, ты мозг!) Как я вечно парюсь с прокидыванием параметров и привязыванием контекста

[flp]

Ты сделал мой день этим .bind

Answer 2

[uRoot]

Немного дополню спустя 3 года... В ES6 можно так:

element.addEventListener('click', () => someFunk(param))

Comments

[Дмитрий]

Как в этом случает удалять обработчик?

[Ruslan Ruslanov]

Дмитрий, removeEventListener

[Дмитрий]

Ruslan Ruslanov, в этом случае removeEventListener не сработает, потому что передана анонимная функция)

[Ruslan Ruslanov]

Дмитрий, тогда надо вынести ее в константу, например. или так не сработает?

[Дмитрий]

Ruslan Ruslanov, вызываемую при клике функцию нужно передавать как основной хендлер, только так этот обработчик можно удалить потом.

[Res1dentEvil]

Дмитрий,
"нужно передавать как основной хендлер" - как это?) покажи плз пример

[Григорий]

Res1dentEvil,
Основной это значит прописывать сразу имя функции, а не вызывать её через анонимную функцию

function hello(){console.log('hello')}

// это вызов функции сразу - removeEvent отработает
document.addEventListener('click', hello )
document.removeEventListener('click', hello )

// это вызов функции через вызов анонимной функции - removeEvent НЕ отработает
document.addEventListener('click', ()=> hello )
document.removeEventListener('click', ()=> hello )

Answer 3

[DangerPNZ]

А ещё вот так:

var someFunk = function(param1, param2) {
   return function (event) { // event по необходимости
      console.log(param1 + ' ' + param2);
   };
};
element.addEventListener('click', someFunk('Коллбек с доступным event', 'и аргументами'));

Comments

[Алексец Долженко]

Таким способом функция будет запускаться каждый раз при открытии страницы! Этот вариант - не вариант

[SinGlEBW]

Мда. Не варик. element.addEventListener('click', someFunk() - это вызов функции. Отработает как только js пробежится по странице.

[Григорий]

webdeveloperzbk, функция возвращает функцию, а не её вызов))

[Алексец Долженко]

Григорий, прежде чем отвечать не плохо бы проверить - element.addEventListener('click', () => someFunk(param)) при загрузке страницы будет именно ВЫЗОВ функции someFunk()

[Григорий]

webdeveloperzbk, я проверил, а вы?

var someFunk = function(param1, param2) {
    return function (event) { // event по необходимости
       console.log(param1 + ' ' + param2);
    };
 };
 document.addEventListener('click', someFunk('Коллбек с доступным event', 'и аргументами'));

[Алексец Долженко]

Григорий, да, он работает, но ведь лаконичнее:

var someFunk = function(param1, param2) {
            console.log(param1 + ' ' + param2);
    };
    document.addEventListener('click', () => someFunk('Коллбек с доступным event', 'и аргументами'));

Answer 4

[Руслан Садыхов]

element.addEventListener('click', function() {
 someFunk(...);
}, false);

Answer 5

[MRS 010]

Долго не мучаясь можно сделать так:

function someFunk(arg1, arg2, arg3) {
    arg1.addEventListener('click', function(){
     .....
});
}

function wtoTo() {
    someFunk(arg1, arg2, arg3);
}