Обробник подій Javascript із параметрами

Я хочу зробити eventHandler, який передає подію та деякі параметри. Проблема в тому, що функція не отримує елемент. Ось приклад:

doClick = function(func){
    var elem = .. // the element where it is all about
    elem.onclick = function(e){
        func(e, elem);
    }
}
doClick(function(e, element){
    // do stuff with element and the event
});

Елем повинен бути визначений поза анонімною функцією. Як я можу отримати переданий елемент для використання в анонімній функції? Чи є спосіб зробити це?

А як щодо addEventListener? Здається, я взагалі не можу передати подію через addEventListener, чи не так?

Оновлення

Здавалося, я вирішив проблему із "цим"

doClick = function(func){
    var that = this;
    this.element.onclick = function(e){
        func(e, that);
    }
}

Де це містить this.element, до якого я можу отримати доступ у функції.

AddEventListener

Але мені цікаво про addEventListener:

function doClick(elem, func){
    element.addEventListener('click', func(event, elem), false);
}

Я не розумію, що саме намагається зробити ваш код, але ви можете зробити змінні доступними в будь-якому обробнику подій, використовуючи переваги закриття функцій:

function addClickHandler(elem, arg1, arg2) {
    elem.addEventListener('click', function(e) {
        // in the event handler function here, you can directly refer
        // to arg1 and arg2 from the parent function arguments
    }, false);
}

Залежно від вашої точної ситуації кодування, ви можете майже завжди зробити так, щоб якесь закриття зберегло доступ до змінних для вас.

З ваших коментарів, якщо те, що ви намагаєтесь досягти, це таке:

element.addEventListener('click', func(event, this.elements[i]))

Потім ви можете зробити це за допомогою самовиконуючоїся функції (IIFE), яка фіксує потрібні аргументи під час закриття під час виконання та повертає фактичну функцію обробника події:

element.addEventListener('click', (function(passedInElement) {
    return function(e) {func(e, passedInElement); };
}) (this.elements[i]), false);

Для отримання додаткової інформації про те, як працює IIFE, див. Ці інші посилання:

Код обтікання Javascript всередині анонімної функції

Вираз функції з негайним викликом (IIFE) у JavaScript - передача jQuery

Які хороші випадки використання для самостійного виконання анонімних функцій JavaScript?

Останню версію, можливо, простіше зрозуміти, що вона робить так:

// return our event handler while capturing an argument in the closure
function handleEvent(passedInElement) {
    return function(e) {
        func(e, passedInElement); 
    };
}

element.addEventListener('click', handleEvent(this.elements[i]));

Це також можна використовувати .bind()для додавання аргументів до зворотного виклику. Будь-які аргументи, до яких ви переходите, .bind()будуть додаватися до аргументів, які буде мати сам зворотний виклик. Отже, ви можете зробити це:

elem.addEventListener('click', function(a1, a2, e) {
    // inside the event handler, you have access to both your arguments
    // and the event object that the event handler passes
}.bind(elem, arg1, arg2));

Це старе питання, але загальне. Тож дозвольте мені додати цю тут.

За допомогою синтаксису функції стрілки ви можете досягти його більш стислим способом, оскільки він лексично пов’язаний і може бути ланцюжком.

Вираз функції стрілки є синтаксично компактною альтернативою виразу регулярної функції, хоча і без власних прив'язок до ключових слів this, аргументи, super або new.target.

const event_handler = (event, arg) => console.log(event, arg);
el.addEventListener('click', (event) => event_handler(event, 'An argument'));

Якщо вам потрібно очистити слухач події:

// Let's use use good old function sytax
function event_handler(event, arg) {
  console.log(event, arg);
}

// Assign the listener callback to a variable
var doClick = (event) => event_handler(event, 'An argument'); 

el.addEventListener('click', doClick);

// Do some work...

// Then later in the code, clean up
el.removeEventListener('click', doClick);

Ось божевільний однокласник:

// You can replace console.log with some other callback function
el.addEventListener('click', (event) => ((arg) => console.log(event, arg))('An argument'));

Більш слухняна версія : Більше підходить для будь-якої здорової роботи.

el.addEventListener('click', (event) => ((arg) => {
  console.log(event, arg);
})('An argument'));

Щось, що ви можете спробувати, це метод прив'язки, я думаю, що це досягає того, про що ви просили. Якщо нічого іншого, це все одно дуже корисно.

function doClick(elem, func) {
  var diffElem = document.getElementById('some_element'); //could be the same or different element than the element in the doClick argument
  diffElem.addEventListener('click', func.bind(diffElem, elem))
}

function clickEvent(elem, evt) {
  console.log(this);
  console.log(elem); 
  // 'this' and elem can be the same thing if the first parameter 
  // of the bind method is the element the event is being attached to from the argument passed to doClick
  console.log(evt);
}

var elem = document.getElementById('elem_to_do_stuff_with');
doClick(elem, clickEvent);

Враховуючи оновлення вихідного питання, здається, що виникають проблеми з контекстом ("це") під час передачі обробників подій. Основи пояснюються, наприклад, тут: http://www.w3schools.com/js/js_js_function_invocation.asp

Проста робоча версія вашого прикладу може читати

var doClick = function(event, additionalParameter){
    // do stuff with event and this being the triggering event and caller
}

element.addEventListener('click', function(event)
{
  var additionalParameter = ...;
  doClick.call(this, event, additionalParameter );
}, false);

Дивіться також виклик Javascript () & apply () проти bind ()?

Коротка відповідь:

x.addEventListener("click", function(e){myfunction(e, param1, param2)});

... 

function myfunction(e, param1, param1) {
    ... 
} 

thisусередині doThingsзнаходиться віконний об'єкт. Спробуйте замість цього:

var doThings = function (element) {
    var eventHandler = function(ev, func){
        if (element[ev] == undefined) {
            return;
        }

        element[ev] = function(e){
            func(e, element);
        }
    };

    return {
        eventHandler: eventHandler
    };
};

let obj = MyObject();

elem.someEvent( function(){ obj.func(param) } );

//calls the MyObject.func, passing the param.