Javascript-Ereignishandler mit Parametern

Ich möchte einen eventHandler erstellen, der das Ereignis und einige Parameter übergibt. Das Problem ist, dass die Funktion das Element nicht erhält. Hier ist ein Beispiel:

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
});

Das 'elem' muss außerhalb der anonymen Funktion definiert werden. Wie kann ich das übergebene Element in der anonymen Funktion verwenden? Gibt es eine Möglichkeit, dies zu tun?

Und was ist mit addEventListener? Ich scheine das Ereignis überhaupt nicht über einen addEventListener weiterleiten zu können, oder?

Aktualisieren

Ich schien das Problem mit "diesem" zu beheben.

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

Wo dies this.element enthält, auf das ich in der Funktion zugreifen kann.

Der addEventListener

Aber ich wundere mich über den addEventListener:

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

Ich verstehe nicht genau, was Ihr Code versucht, aber Sie können Variablen in jedem Event-Handler verfügbar machen, indem Sie die Vorteile von Funktionsabschlüssen nutzen:

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);
}

Abhängig von Ihrer genauen Codierungssituation können Sie so gut wie immer eine Art Schließung vornehmen, um den Zugriff auf die Variablen für Sie zu erhalten.

Aus Ihren Kommentaren geht Folgendes hervor:

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

Anschließend können Sie dies mit einer selbstausführenden Funktion (IIFE) tun, die die gewünschten Argumente in einem Abschluss erfasst, während sie ausgeführt wird, und die eigentliche Ereignishandlerfunktion zurückgibt:

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

Weitere Informationen zur Funktionsweise eines IIFE finden Sie in den folgenden Referenzen:

Javascript-Wrapping-Code in anonymer Funktion

Sofort aufgerufener Funktionsausdruck (IIFE) in JavaScript - Übergabe von jQuery

Was sind gute Anwendungsfälle für selbstausführende anonyme JavaScript-Funktionen?

Diese letzte Version ist vielleicht einfacher zu sehen, was es so macht:

// 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]));

Es ist auch möglich .bind(), einem Rückruf Argumente hinzuzufügen. Alle Argumente, an die Sie übergeben, .bind()werden den Argumenten vorangestellt, die der Rückruf selbst haben wird. Sie könnten dies also tun:

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));

Es ist eine alte, aber häufig gestellte Frage. Lassen Sie mich diesen hier hinzufügen.

Mit Pfeil Funktion Syntax können Sie ihm prägnante Art und Weise erreichen , da es lexikalisch binded und verkettet werden kann.

Ein Pfeilfunktionsausdruck ist eine syntaktisch kompakte Alternative zu einem regulären Funktionsausdruck, jedoch ohne eigene Bindung an die Schlüsselwörter this, arguments, super oder new.target.

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

Wenn Sie den Ereignis-Listener bereinigen müssen:

// 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);

Hier ist verrückter Einzeiler:

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

Fügsamere Version : Eher für jede vernünftige Arbeit geeignet.

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

Sie können versuchen, die Bindemethode zu verwenden. Ich denke, dies erreicht das, wonach Sie gefragt haben. Wenn nichts anderes, ist es immer noch sehr nützlich.

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);

Angesichts der Aktualisierung der ursprünglichen Frage scheint es Probleme mit dem Kontext ("dies") beim Übergeben von Ereignishandlern zu geben. Die Grundlagen werden zB hier erklärt http://www.w3schools.com/js/js_function_invocation.asp

Eine einfache Arbeitsversion Ihres Beispiels könnte lauten

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);

Siehe auch Javascript call () & apply () vs bind ()?

Kurze Antwort:

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

... 

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

thisInnerhalb von doThingsbefindet sich das Fensterobjekt. Versuchen Sie stattdessen Folgendes:

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.