Das Event-Objekt

Das Objekt event wird bei Auslösung eines Ereignisses erzeugt und enthält Informationen darüber. Bei Auftreten des Ereignisses wird das Objekt event an die Handler-Funktion übergeben.

Eigenschaften und Methoden des Event-Objekts

In der folgenden Tabelle sind die Eigenschaften und Methoden des Objekts event und ihre Beschreibung aufgeführt:

Name	Beschreibung
`event.currentTarget`	Das aktuelle DOM-Element in der Bubbling-Phase des Ereignisses. Normalerweise ist diese Eigenschaft äquivalent zu `this` der Funktion.
`event.data`	Optionaler Parameter. Das Datenobjekt, das an die Ereignismethode übergeben wird, wenn der ausführbare Handler angehängt wird.
`event.delegateTarget`	Das Element, an dem der soeben aufgerufene jQuery-Ereignishandler angehängt wurde. Diese Eigenschaft ist am nützlichsten bei delegierten Ereignissen, wenn der Handler an einen Vorfahren des zu behandelnden Elements gebunden ist. Für nicht delegierte Handler, die direkt an ein Element gebunden sind, entspricht der Wert `event.delegateTarget` dem Wert `event.currentTarget`.
`event.isDefaultPrevented`	Die Methode prüft, ob die Methode `event.preventDefault` für dieses Ereignisobjekt aufgerufen wurde.
`event.isImmediatePropagationStopped`	Die Methode prüft, ob die Methode `event.stopImmediatePropagation` für dieses Ereignisobjekt aufgerufen wurde.
`event.isPropagationStopped`	Die Methode prüft, ob die Methode `event.stopPropagation` für dieses Ereignisobjekt aufgerufen wurde.
`event.isPropagationStopped`	Die Methode prüft, ob die Methode `event.stopPropagation` für dieses Ereignisobjekt aufgerufen wurde.
`event.metaKey`	Die Methode prüft, ob die Taste `META` zum Zeitpunkt des Auslösens des Ereignisses gedrückt wurde. Je nach Plattform kann die Taste unterschiedlich sein. Gibt `true` oder `false` zurück.
`event.namespace`	Der Namensraum, der zum Zeitpunkt des Aufrufs des Ereignisses angegeben wurde. Diese Eigenschaft erweist sich als nützlich für Plugin-Autoren, deren Aufgaben vom verwendeten Namensraum abhängen.
`event.pageX`	Zeigt die Position der Maus relativ zum linken Rand des Dokuments an.
`event.pageY`	Zeigt die Position der Maus relativ zum oberen Rand des Dokuments an.
`event.preventDefault`	Wenn diese Methode aufgerufen wird, wird die Standardaktion für dieses Ereignis nicht ausgeführt. Zum Beispiel führt ein Klick auf einen Link nicht zu einem neuen URL. Um zu überprüfen, ob diese Methode aufgerufen wurde, kann die Methode `event.isDefaultPrevented` verwendet werden.
`event.relatedTarget`	Gibt ein anderes DOM-Element zurück, das an dem Ereignis beteiligt ist, falls vorhanden. Für `mouseout` zeigt es an, auf welches Element die Maus zeigt, für `mouseover` von welchem Element der Mauszeiger wegbewegt wurde.
`event.result`	Der letzte Wert, der vom Handler des ausgelösten Ereignisses zurückgegeben wurde, der nicht `undefined` entspricht. Die Eigenschaft kann nützlich sein, um Werte eigener Ereignisse zu erhalten.
`event.stopImmediatePropagation`	Bricht die Ausführung aller verbleibenden Ereignishandler, die mit dem Element verbunden sind, ab und verhindert das Bubbling des Ereignisses im DOM-Baum nach oben. Um einfach zu verhindern, dass das Ereignis zu Vorfahrenelementen aufsteigt, aber anderen Ereignishandlern zu erlauben zu arbeiten, kann die Methode `event.stopPropagation` verwendet werden. Verwenden Sie die Methode `event.isImmediatePropagationStopped`, um zu überprüfen, ob `event.stopImmediatePropagation` für dieses Ereignisobjekt aufgerufen wurde.
`event.stopPropagation`	Verhindert das Bubbling des Ereignisses im DOM-Baum nach oben. Denken Sie daran, dass andere Handler für dieses Element weiterhin funktionieren. Diese Methode funktioniert für eigene Ereignisse, die mit der Methode `trigger` ausgelöst wurden. Um zu überprüfen, ob diese Methode aufgerufen wurde, verwenden Sie `event.isPropagationStopped`.
`event.target`	Das DOM-Element, das das Ereignis ausgelöst hat. Das kann das für das Ereignis registrierte Element oder sein Nachfahre sein. Es ist sehr nützlich, `event.target` und `this` zu vergleichen, um das Bubbling des Ereignisses zu bestimmen. Die Eigenschaft ist nützlich bei der Delegierung von Ereignissen, wenn Ereignisse aufsteigen.
`event.timeStamp`	Zeitdifferenz in Millisekunden zwischen dem Zeitpunkt der Erzeugung des Ereignisses durch den Browser und dem 1. Januar 1970. Die Eigenschaft kann nützlich sein, um die Leistung eines Ereignisses zu bestimmen, indem die Differenz der Werte von `event.timeStamp` für zwei Zeitpunkte im Code ermittelt wird. Wenn Sie einfach nur die aktuelle Zeit innerhalb eines Ereignishandlers erhalten möchten, verwenden Sie die Methode `getTime`.
`event.type`	In dieser Eigenschaft ist der Typ des Ereignisses angegeben.
`event.which`	Diese Eigenschaft gibt an, welche Taste der Tastatur oder Maus gedrückt wurde. Für die Maus: `1` - linke Taste, `2` - mittlere Taste (Rad), `3` - rechte Taste. Verwenden Sie `event.which` anstelle von `event.button`.

Weitere Eigenschaften des Event-Objekts

Es gibt noch weitere Eigenschaften, die in das Objekt event kopiert werden:

altKey, button, buttons, cancelable, char, charCode, clientX, clientY, ctrlKey, detail, eventPhase, key, keyCode, offsetX, offsetY, originalTarget, screenX, screenY, shiftKey, toElement, view.

Um auf Eigenschaften zuzugreifen, die oben nicht aufgeführt sind, kann das Objekt event.originalEvent verwendet werden.

Beispiel

Lassen Sie uns in ein Div ausgeben, welche Tasten gedrückt wurden:

<input id="test" value="type something">
<div id="text"></div>

$('#test').on('keydown', function(event) {
	$('#text').html(event.type + ": " +  event.which);
});

Beispiel

Lassen Sie uns in ein Div ausgeben, auf welchen Tag wir klicken:

<body>
	<div id="text"></div>
	<div>
		<p>
			<strong><span>click</span></strong>
		</p>
	</div>
</body>

span, strong, p {
	display: block;
	padding: 10px;
	border: 1px solid black;
}

$('body').click(function(event) {
	$('#text').html('clicked: ' + event.target.nodeName);
});

Siehe auch

die Methode on,
die es erlaubt, einen Ereignishandler an ein Element zu binden
die Methode trigger,
die es erlaubt, alle Ereignishandler, die an ein Element für Ereignisse eines bestimmten Typs gebunden sind, auszulösen
die Methode triggerHandler,
die es erlaubt, alle Ereignishandler, die an ein Element gebunden sind, auszulösen
jQuery-Ereignisse