So schreiben Sie Ereignisse in JQuery

jQuery ist eine beliebte JavaScript-Bibliothek, die eine wichtige Rolle in unserer Webentwicklung spielt. Unter anderem sind Ereignisse wichtige interaktive Elemente auf der Seite und können der Schlüssel zur Erzielung verschiedener interaktiver Effekte sein. In diesem Artikel besprechen wir ausführlich, wie Ereignisse in jQuery geschrieben werden.

1. Ereignisse binden

In jQuery können Sie die Methode .on() verwenden, um Ereignisse zu binden. Diese Methode erfordert mindestens zwei Parameter. Der erste Parameter ist der Ereignistyp, z. B. Klicken, Mouseover, Keydown usw. Der zweite Parameter ist die auszuführende Funktion, also der Code, der ausgeführt werden soll, wenn das Ereignis ausgelöst wird.

Zum Beispiel bindet der folgende Code Klickereignisse an alle Elemente mit der Klasse „button“:

$(".button").on('click', function(){
    //执行点击事件时要执行的代码
})

2. Mehrere Ereignisse binden

Wenn Sie mehrere Ereignisse an ein Element binden müssen, können Sie Leerzeichen für den Ereignistyp verwenden getrennt. Der folgende Code löst beispielsweise Ereignisse bei gleichzeitigem Klicken und Doppelklicken aus:

$("#btn").on('click dblclick', function(){
    //执行事件时要执行的代码
});

3. Mehrere Elemente sind an dasselbe Ereignis gebunden

Wenn mehrere Elemente an dasselbe Ereignis gebunden werden müssen, können Sie auswählen Binden Sie diese Elemente dann über den Selektor an dasselbe Ereignis. Der folgende Code bindet beispielsweise alle Elemente der Klasse „button“ an dasselbe Klickereignis:

$(".button").on('click', function(){
    //执行点击事件时要执行的代码
});

4. Dynamische Elementbindungsereignisse

Wenn Sie Elemente dynamisch zur Seite hinzufügen müssen und diese Elemente binden müssen Für Ereignisse können Sie den Ereignisdelegaten von jQuery verwenden. Unter Ereignisdelegation versteht man die Bindung von Ereignissen an übergeordnete Elemente und nicht direkt an untergeordnete Elemente. Wenn ein untergeordnetes Element ein Ereignis auslöst, wird das Ereignis an das übergeordnete Element übergeben. Der folgende Code bindet beispielsweise Klickereignisse an die p-Tags aller vorhandenen oder zukünftigen .content-Elemente:

$(".content").on('click', 'p', function(){
    //执行点击事件时要执行的代码
});

5. Bindung von Ereignissen aufheben

Sie können die Methode off() verwenden, um Ereignisse zu entbinden. Der folgende Code löst beispielsweise die Bindung des Klickereignisses aller Elemente:

$("*").off('click');

6. Verhindern Sie, dass Ereignisse sprudeln.

Wenn ein Ereignis für ein Element ausgelöst wird, wird das Ereignis an das übergeordnete Element des Elements weitergegeben Dies wird als Event-Bubbling bezeichnet. Wenn Sie verhindern müssen, dass das Ereignis sprudelt, können Sie die Methode stopPropagation() im Ereignishandler verwenden. Beispielsweise wird der folgende Code das Sprudeln abbrechen:

$(".button").on('click', function(e){
    e.stopPropagation();
});

7. Verhindern Sie das Standardverhalten von Ereignissen

Das Standardverhalten einiger Elemente kann andere interaktive Effekte auf der Webseite beeinträchtigen. Wenn Sie das Standardverhalten eines Ereignisses abbrechen müssen, können Sie die Methode „preventDefault()“ im Ereignishandler verwenden. Der folgende Code hebt beispielsweise das Standardsprungverhalten des Links auf:

$("a").on('click', function(e){
    e.preventDefault();
});

Zusammenfassung:

Das Obige ist die Diskussion von Ereignissen in jQuery in diesem Artikel. Durch Lernen können wir klar verstehen, wie man Ereignisse bindet, mehrere Ereignisse bindet, mehrere Elemente an dasselbe Ereignis bindet und so weiter. Gleichzeitig haben wir auch Techniken wie das Binden von Ereignissen für dynamische Elemente, das Aufheben der Bindung von Ereignissen, das Verhindern von Ereignisblasen und das Verhindern von Standardverhalten bei Ereignissen erlernt. Durch die Beherrschung dieser Technologien können wir einfacher verschiedene interaktive Effekte auf der Seite erzielen und die Webseite lebendiger gestalten.

Das obige ist der detaillierte Inhalt vonSo schreiben Sie Ereignisse in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!