| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/de/docs/Web/API/Event/currentTarget | [Back] [Original] |
Get to know MDN better
Dieser Inhalt wurde automatisch aus dem Englischen bersetzt, und kann Fehler enthalten. Erfahre mehr ber dieses Experiment.
Diese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit Juli 2015 browserbergreifend verfgbar.
Hinweis: Diese Funktion ist in Web Workers verfgbar.
Die currentTarget-Eigenschaft der Event-Schnittstelle (nur lesend) identifiziert das Element, an das der Ereignishandler gebunden ist.
Dies entspricht nicht immer dem Element, auf dem das Ereignis ausgelst wurde, da das Ereignis mglicherweise auf einem Nachkommen des Elements mit dem Handler ausgelst wurde und dann nach oben gebubbelt ist zu dem Element mit dem Handler. Das Element, auf dem das Ereignis ausgelst wurde, wird durch Event.target angegeben.
Bitte beachten Sie, dass der Wert von currentTarget nur in einem Handler fr das Ereignis verfgbar ist. Auerhalb eines Ereignishandlers wird es null sein. Das bedeutet zum Beispiel, dass, wenn Sie in einem Ereignishandler eine Referenz auf das Event-Objekt nehmen und dann auerhalb des Ereignishandlers auf dessen currentTarget-Eigenschaft zugreifen, der Wert null sein wird.
Ein EventTarget, das das Objekt darstellt, an das der aktuelle Ereignishandler gebunden ist.
Dieses Beispiel verdeutlicht den Unterschied zwischen currentTarget und target.
Die Seite hat einen "Eltern"-<div>, der ein "Kind" <div> enthlt.
<div id="parent">
Click parent
<div id="child">Click child</div>
</div>
<button id="reset">Reset</button>
<pre id="output"></pre>
button,
div,
pre {
margin: 0.5rem;
}
div {
padding: 1rem;
border: 1px solid black;
}
Der Ereignishandler ist an den Eltern gebunden. Er protokolliert den Wert von event.currentTarget und event.target.
Wir haben auch einen "Zurcksetzen"-Button, der einfach das Beispiel neu ldt.
const output = document.querySelector("#output");
const parent = document.querySelector("#parent");
parent.addEventListener("click", (event) => {
const currentTarget = event.currentTarget.getAttribute("id");
const target = event.target.getAttribute("id");
output.textContent = `Current target: ${currentTarget}\n`;
output.textContent += `Target: ${target}`;
});
const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());
Wenn Sie innerhalb des Kind-<div> klicken, identifiziert target das Kind. Wenn Sie innerhalb des Eltern-<div> klicken, identifiziert target den Eltern.
In beiden Fllen identifiziert currentTarget den Eltern, da das der Element ist, an das der Handler gebunden ist.
| Spezifikation |
|---|
| DOM # ref-for-dom-event-currenttarget |
EventAbortControllerAbortSignalAbstractRangeAttrCDATASectionCharacterDataCommentCustomEventDOMErrorDOMExceptionDOMImplementationDOMParserDOMTokenListDocumentDocumentFragmentDocumentTypeElementEventTargetHTMLCollectionMutationObserverMutationRecordNamedNodeMapNodeNodeIteratorNodeListProcessingInstructionQuotaExceededErrorRangeShadowRootStaticRangeTextTreeWalkerXMLDocumentXPathEvaluatorXPathExpressionXPathResultXSLTProcessorDer Bauplan fr ein besseres Internet.
Teile dieses Inhalts sind 19982026 von einzelnen mozilla.org-Mitwirkenden. Inhalte sind verfgbar unter einer Creative-Commons-Lizenz.
| Web Proxy Viewer | New URL | Original Page |