Die Methode on

Die Methode on ermöglicht es, einen Ereignis-Handler zu einem Element hinzuzufügen. Um den Handler zu entfernen, kann die Methode off verwendet werden. Um ein Ereignis nur einmal auszulösen, bevor sich der Handler selbst entfernt, verwenden Sie die Methode one. Elemente, an die wir einen Handler binden, müssen zum Zeitpunkt des Aufrufs von on existieren.

Syntax

So fügen wir einem Element einen Ereignis-Handler hinzu. Als erster Parameter wird ein oder mehrere Ereignisse als Zeichenkette, getrennt durch Leerzeichen, übergeben. Der zweite Parameter ist ein optionaler filternder Selektor für Nachfahren innerhalb des Elements, der dritte sind optionale zusätzliche Daten, die an den Handler in der Eigenschaft event.data beim Auslösen des Ereignisses übergeben werden. Der zweite und dritte Parameter sind optional. Der vierte Parameter ist die Handler-Funktion, der das Ereignisobjekt und optionale zusätzliche Parameter übergeben werden. Wenn statt der Handler-Funktion false übergeben wird, gibt die Funktion einfach false zurück:

$(Selektor).on(Ereignisse, [Selektor], [Daten], Handler-Funktion(Ereignisobjekt, [zusätzliche Parameter]));

Die Methode on kann auch anders verwendet werden. Dann wird im ersten Parameter ein JavaScript-Objekt übergeben, bei dem die Schlüssel die Ereignistypen und die Werte die Handler-Funktionen sind, die für die Ereignisse aufgerufen werden:

$(Selektor).on({'Ereignistyp': Handler}, [Selektor], [Daten]);

Wenn wir keinen zusätzlichen Selektor übergeben, wird das Ereignis auf dem Element ausgelöst, an das wir den Handler anhängen. Andernfalls geschieht dies auf einem Nachfahren-Element, das diesem Selektor entspricht (delegierte Ereignisse). Derselbe Ereignis-Handler kann mehrmals an ein Element gebunden werden.

Beispiel

Lassen Sie uns in einem alert den Text des Absatzes mit #test anzeigen, wenn darauf geklickt wird. Klicks auf andere Absätze führen zu nichts:

<p>text1</p>
<p id="test">text2</p>
<p>text3</p>

$('#test').on('click', function() {
	alert( $(this).text() );
});

Beispiel

Lassen Sie uns beim Klick auf einen Absatz die Daten anzeigen, die wir an die Methode on übergeben haben. Wir verwenden die Handler-Funktion testFunc, die wir erstellt haben:

<p>click</p>

function testFunc(event) {
	alert(event.data.text);
}

$('p').on('click', {text: 'aaa'}, testFunc);

Siehe auch

die Methode off,
die es ermöglicht, einen Ereignis-Handler bei einem Element zu entfernen
die Methode one,
die es ermöglicht, dass ein Ereignis nur einmal ausgelöst wird, und dann den Handler automatisch entfernt
das Objekt event,
das Informationen über das Ereignis enthält
die Methode trigger,
die es ermöglicht, alle Ereignis-Handler auszulösen, die an ein Element für Ereignisse eines bestimmten Typs gebunden sind
die JavaScript-Methode bind,
die es ermöglicht, einen Kontext an eine Funktion zu binden