Argumente bei addEventListener

[Dieter Raber]

Hallo,

Es gibt ja drei Arten, einem Element eine Funktion mitzugeben, naemlich
[1] elem.addEventListener(eventType, functionName, useCapture) // bzw. IE-Variante
[2] elem.onclick = function () {} // bzw. Name der Funktion
[3] <element onclick="foo()" />

Waehrend man bei [2] und [3] ja problemlos Parameter mitschicken kann, ist mir nicht klar, wie das bei [1] funktionieren soll. Kann mir vielelicht jemand auf die Sprünge helfen?

Gruß,

Dieter

[Mathias Brodala]

Hallo Dieter.

Es gibt ja drei Arten, einem Element eine Funktion mitzugeben, naemlich
[1] elem.addEventListener(eventType, functionName, useCapture) // bzw. IE-Variante
[2] elem.onclick = function () {} // bzw. Name der Funktion
[…]

Waehrend man bei [2] und [3] ja problemlos Parameter mitschicken kann, ist mir nicht klar, wie das bei [1] funktionieren soll.

Genau so wie bei [2]:

elem.addEventListener(eventType, function() {

function(args);

}, useCapture);

Denn genau wie bei [2] ist nur wichtig, dass eine Funktion angegeben wird, auf die zurückgegriffen werden kann. Ob dies nun eine anonyme Funktion oder eine Referenz auf eine Funktion ist, ist hier gleich.

Einen schönen Sonntag noch.

Gruß, Mathias

[Dieter Raber]

Hallo Mathias,

danke fuer die Antwort, funktioniert prima!

Gruß,

Dieter

[molily]

Hallo,

[1] elem.addEventListener(eventType, functionName, useCapture) // bzw. IE-Variante

Waehrend man bei [2] und [3] ja problemlos Parameter mitschicken kann, ist mir nicht klar, wie das bei [1] funktionieren soll.

Ich würde sagen, das kommt auf die Art der Parameter an. Gegebenenfalls kann man diese einfach ans elem anhängen, anstatt im schlimmsten Fall immer neue Funktionen zu erzeugen.

elem.addEventListener(eventType, function() {
  function(args);
}, useCapture);

Hier müsste man darauf achten, gegebenenfalls das Eventobjekt durchzureichen. Außerdem zeigt »this« in der zweiten Funktion nicht mehr auf elem, wodurch man im IE keinen zuverlässigen Zugriff auf elem mehr hat. Das kann man nur umständlich mit call() lösen:

elem.addEventListener(eventType, function (e) {  
  func.call(elem, e || window.event, nochEinParameter, undNochEiner, ...);  
}, false);

Ist nicht wirklich praktikabel, deshalb würde ich erst einmal nach einer anderne Lösung suchen.

Mathias