Ereignismechanismus und Blockierung in jq und js

Ereignisbindung in JQuery ist alles Ereignis-Bubbling. In diesem Artikel werden wir Ihnen den Ereignismechanismus und die Prävention in jq und js vorstellen.

Die verschiedenen Möglichkeiten, Ereignisverarbeitungsfunktionen in JQuery zu binden, erlauben es uns nicht, den Ereignistyp (Ereignisblasen oder Ereigniserfassung) zu übergeben ). Zum Beispiel:

.on(events [, selector ] [, data ], handler)

Parameter
Ereignisse – Geben Sie als Zeichenfolge einen oder mehrere Ereignistypen ein, die durch Leerzeichen und optionale Namensräume getrennt sind, z. B. „Klick“, „Fokus-Klick“ „, „keydown.myPlugin“.
eventsMap – Der Objekttyp ist ein Objektobjekt, jedes seiner Attribute entspricht dem Ereignistyp und dem optionalen Namespace (Parameterereignisse) und der Attributwert entspricht der gebundenen Ereignisverarbeitungsfunktion (Parameterhandler). .
selector – Optional/String-Typ Ein jQuery-Selektor, der verwendet wird, um anzugeben, welche untergeordneten Elemente gebundene Ereignisse auslösen können. Wenn dieser Parameter null ist oder weggelassen wird, bedeutet dies, dass das aktuelle Element selbst an das Ereignis gebunden ist (der eigentliche Auslöser kann auch ein untergeordnetes Element sein, solange der Ereignisstrom das aktuelle Element erreichen kann).
Daten – optional/jede Art von Daten, die über event.data an die Ereignisverarbeitungsfunktion übergeben werden müssen, wenn ein Ereignis ausgelöst wird.
handler – Ereignisbehandlungsfunktion, angegeben durch den Funktionstyp.

Der von nativem Javascript bereitgestellte addEventListener() ermöglicht das Festlegen des Ereignistyps

element.addEventListener(event, function, useCapture)

Parameter
Ereignis – erforderlich. Zeichenfolge, die den Ereignisnamen angibt.

Hinweis: Verwenden Sie nicht das Präfix „on“. Verwenden Sie beispielsweise „click“ anstelle von „onclick“.

Funktion – erforderlich. Geben Sie die Funktion an, die ausgeführt werden soll, wenn das Ereignis ausgelöst wird.

Wenn das Ereignisobjekt als erster Parameter an die Funktion übergeben wird. Der Typ des Ereignisobjekts hängt vom jeweiligen Ereignis ab. Beispielsweise gehört das „click“-Ereignis zum MouseEvent-Objekt.
useCapture – Optional. Ein boolescher Wert, der angibt, ob das Ereignis in der Erfassungs- oder Bubbling-Phase ausgeführt wird.

Mögliche Werte:
true – der Event-Handler wird während der Erfassungsphase ausgeführt
false – false – Standard. Der Event-Handler wird während der Bubbling-Phase ausgeführt

Zwei Möglichkeiten, die Ereignisweitergabe zu verhindern

Methode 1: Verwenden Sie die Funktion stopPropagation() des Ereignisobjekts. Dieser Ansatz ist konsistent mit JavaScript.

$("#outC").click(function(event){  
    event.stopPropagation();  
});

Methode 2: Der Rückgabewert der Ereignisverarbeitungsfunktion ist falsch. Der addEventListener in JavaScript verfügt nicht über diese Funktion.

$("#outC").click(function(event){  
    return false;  
});

                                                                                                                                                                                                                                                       

Bei der Ereignisbindung in JQuery handelt es sich ausschließlich um Ereignissprudeln.

Die verschiedenen Möglichkeiten, Ereignisverarbeitungsfunktionen in JQuery zu binden, erlauben es uns nicht, den Ereignistyp (Ereignisblasen oder Ereigniserfassung) zu übergeben. Zum Beispiel:

Parameter

.on(events [, selector ] [, data ], handler)

Ereignisse

– Geben Sie als Zeichenfolge einen oder mehrere Ereignistypen ein, die durch Leerzeichen und optionale Namensräume getrennt sind, z. B. „Klick“, „Fokus-Klick“ „, „keydown.myPlugin“.
eventsMap – Der Objekttyp ist ein Objektobjekt, jedes seiner Attribute entspricht dem Ereignistyp und dem optionalen Namespace (Parameterereignisse) und der Attributwert entspricht der gebundenen Ereignisverarbeitungsfunktion (Parameterhandler). .
selector – Optional/String-Typ Ein jQuery-Selektor, der verwendet wird, um anzugeben, welche untergeordneten Elemente gebundene Ereignisse auslösen können. Wenn dieser Parameter null ist oder weggelassen wird, bedeutet dies, dass das aktuelle Element selbst an das Ereignis gebunden ist (der eigentliche Auslöser kann auch ein untergeordnetes Element sein, solange der Ereignisstrom das aktuelle Element erreichen kann).
Daten – optional/jede Art von Daten, die über event.data an die Ereignisverarbeitungsfunktion übergeben werden müssen, wenn ein Ereignis ausgelöst wird.
handler – Ereignisbehandlungsfunktion, angegeben durch den Funktionstyp.
Der von nativem Javascript bereitgestellte addEventListener() ermöglicht das Festlegen des Ereignistyps

Parameter

element.addEventListener(event, function, useCapture)

Ereignis

– erforderlich. Zeichenfolge, die den Ereignisnamen angibt.
Hinweis: Verwenden Sie nicht das Präfix „on“. Verwenden Sie beispielsweise „click“ anstelle von „onclick“.

Funktion

– erforderlich. Geben Sie die Funktion an, die ausgeführt werden soll, wenn das Ereignis ausgelöst wird.

Wenn das Ereignisobjekt als erster Parameter an die Funktion übergeben wird. Der Typ des Ereignisobjekts hängt vom jeweiligen Ereignis ab. Beispielsweise gehört das „click“-Ereignis zum MouseEvent-Objekt.

useCapture

– Optional. Ein boolescher Wert, der angibt, ob das Ereignis in der Erfassungs- oder Bubbling-Phase ausgeführt wird.
Mögliche Werte: true – der Event-Handler wird während der Erfassungsphase ausgeführt

false – false – Standard. Der Event-Handler wird während der Bubbling-Phase ausgeführt

Zwei Möglichkeiten, die Ereignisweitergabe zu verhindern

Methode 1: Verwenden Sie die Funktion stopPropagation() des Ereignisobjekts. Dieser Ansatz ist konsistent mit JavaScript.

Methode 2: Der Rückgabewert der Ereignisverarbeitungsfunktion ist falsch. Der addEventListener in JavaScript verfügt nicht über diese Funktion.

$("#outC").click(function(event){  
    event.stopPropagation();  
});

Verwandte Empfehlungen:

$("#outC").click(function(event){  
    return false;  
});

JavaScript-Ereignismechanismus

Ein erster Blick auf den Ereignismechanismus von JQuery (2) (1)_jquery

Eine kurze Analyse des Ereignismechanismus in JavaScript_Grundkenntnisse

Das obige ist der detaillierte Inhalt vonEreignismechanismus und Blockierung in jq und js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!