it-swarm.com.de

Wie übergebe ich ein Ereignis als Argument an einen Inline-Ereignishandler in JavaScript?

// this e works
document.getElementById("p").oncontextmenu = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(target);
};

// this e is undefined
function doSomething(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(target);
}
<p id="p" onclick="doSomething(e)">
    <a href="#">foo</a>
    <span>bar</span>
</p>

Es wurden einige ähnliche Fragen gestellt.

Aber in meinem Code Ich versuche, untergeordnete Elemente abzurufen, auf die geklickt wurde, z. B. a oder span.

Was ist also die richtige Methode, um event als Argument an die Ereignisbehandlungsroutine zu übergeben, oder wie man ein Ereignis innerhalb der Behandlungsroutine abruft, ohne ein Argument zu übergeben?

bearbeiten

Mir sind addEventListener und jQuery bekannt. Bitte geben Sie eine Lösung für die Übergabe des Ereignisses an den Ereignishandler inline an.

74
user1643156

so übergeben Sie das Objekt event:

<p id="p" onclick="doSomething(event);">

um das angeklickte untergeordnete Element zu erhalten (sollte mit dem Parameter event verwendet werden):

function doSomething(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(target);
}

um das Element selbst zu übergeben (DOMElement):

<p id="p" onclick="doThing(this);">

siehe Live-Beispiel auf jsFiddle

124
Akram Berkawy

Da Inline-Ereignisse als Funktionen ausgeführt werden, können Sie einfach Argumente verwenden.

<p id="p" onclick="doSomething.apply(this, arguments)">

und

function doSomething(e) {
  if (!e) e = window.event;
  // 'e' is the event.
  // 'this' is the P element
}

Das 'Ereignis', das in der akzeptierten Antwort erwähnt wird, ist tatsächlich der Name des Arguments, das an die Funktion übergeben wird. Es hat nichts mit dem globalen Ereignis zu tun.

12
Semra

Sie müssen this nicht übergeben, da das event -Objekt bereits standardmäßig automatisch übergeben wird. Es enthält event.target, Von dem das Objekt stammt. Sie können Ihre Syntax vereinfachen:

Dies:

<p onclick="doSomething()">

Wird damit arbeiten:

function doSomething(){
  console.log(event);
  console.log(event.target);
}

Sie müssen das Objekt event nicht instanziieren, es ist bereits vorhanden. Versuch es. Und event.target Enthält das gesamte Objekt, das es aufgerufen hat und auf das Sie zuvor als "this" verwiesen haben.

Wenn Sie nun irgendwo in Ihrem Code dynamisch doSomething () auslösen, werden Sie feststellen, dass event undefiniert ist. Dies liegt daran, dass es nicht durch ein Klickereignis ausgelöst wurde. Wenn Sie das Ereignis dennoch künstlich auslösen möchten, verwenden Sie einfach dispatchEvent:

document.getElementById('element').dispatchEvent(new CustomEvent("click", {'bubbles': true}));

Dann sieht doSomething()event und event.target Wie gewohnt!

Sie müssen this nicht überall übergeben, und Sie können Ihre Funktionssignaturen frei von Verkabelungsinformationen halten und die Dinge vereinfachen.

0
Wadih M.