Detaillierte Antworten auf Ereignisse in JS (grafisches Tutorial)

In diesem Artikel geht es hauptsächlich um die JS-Weitergabe von Ereignissen, das Aufheben des Standardverhaltens von Ereignissen und die Verhinderung der Ereignisweitergabe. Der detaillierte Vorgang wird anhand der Rückgabewert-Aufrufsequenz des Ereignishandlers erläutert

1. Der Rückgabewert des Ereignishandlers

Normalerweise weist der Rückgabewert false den Browser an, die mit diesem Ereignis verbundene Standardoperation nicht auszuführen. Beispielsweise kann der Onclick-Ereignishandler der Schaltfläche zum Senden des Formulars verhindern, dass der Browser das Formular sendet, indem er „false“ zurückgibt, und der Onclick-Ereignishandler des a-Tags kann das Springen zur href-Seite verhindern, indem er „false“ zurückgibt. Ebenso kann der onkeypress-Ereignishandler im Eingabefeld Tastatureingaben filtern, indem er „false“ zurückgibt, wenn der Benutzer ungeeignete Zeichen eingibt.
Der Rückgabewert eines Event-Handlers ist nur für über Attribute registrierte Handler von Bedeutung.

2. Aufrufreihenfolge

Dokumentelemente oder andere Objekte können mehrere Ereignishandler für bestimmte Ereignistypen registrieren. Wenn das entsprechende Ereignis auftritt, muss der Browser alle Ereignishandler gemäß den folgenden Regeln aufrufen:

Handler, die durch Festlegen von Objekteigenschaften oder HTML-Attributen registriert werden, haben immer Vorrang.
Mit addEventListener() registrierte Handler werden in der Reihenfolge aufgerufen, in der sie registriert wurden.
Mit attachmentEvent() registrierte Handler können in beliebiger Reihenfolge aufgerufen werden, daher sollte der Code nicht von der Reihenfolge der Aufrufe abhängen

3. Ereignisweitergabe

Nach dem Aufruf des im Zielelement registrierten Ereignishandlers „blubbern“ die meisten Ereignisse an die Wurzel des DOM-Baums. Ruft den Ereignishandler für das übergeordnete Element des Ziels auf und ruft dann den Ereignishandler auf, der für das übergeordnete Element des Ziels registriert ist. Dies reicht bis zum Document-Objekt und schließlich zum Window-Objekt.

Die meisten Ereignisse, die an Dokumentelementen auftreten, sprudeln, mit bemerkenswerten Ausnahmen sind die Fokus-, Unschärfe- und Scroll-Ereignisse. Das Ladeereignis des Dokumentelements wird sprudeln, aber es hört auf, auf dem Document-Objekt zu sprudeln, und wird nicht an das Window-Objekt weitergegeben. Das Ladeereignis des Window-Objekts wird nur ausgelöst, wenn das gesamte Dokument geladen ist.

4. Brechen Sie das Standardereignisverhalten ab und verhindern Sie die Ereignisweitergabe

In Browsern, die addEventListener() unterstützen, können Sie das Ereignisobjekt The aufrufen Die Methode PreventDefault() bricht die Standardaktion des Ereignisses ab. In IE vor IE9 kann der gleiche Effekt erzielt werden, indem die returnValue-Eigenschaft des Ereignisobjekts auf false gesetzt wird. Der folgende Codeteil kombiniert drei Techniken zum Absagen einer Veranstaltung:

function cancelHandler(event){
 var event=event||window.event;//兼容IE
 //取消事件相关的默认行为
 if(event.preventDefault) //标准技术
 event.preventDefault();
 if(event.returnValue) //兼容IE9之前的IE
 event.returnValue=false;
 return false; //用于处理使用对象属性注册的处理程序
}

Der Standardvorgang im Zusammenhang mit der Absage einer Veranstaltung ist nur eine davon Wir können auch die Veranstaltungsabsagen absagen. In Browsern, die addEventListener() unterstützen, können Sie die stopPropagation()-Methode des Ereignisobjekts aufrufen, um zu verhindern, dass sich das Ereignis weiter ausbreitet. Wenn andere Handler für dasselbe Objekt definiert sind, werden die verbleibenden Handler weiterhin aufgerufen, Ereignishandler für andere Objekte werden jedoch nach dem Aufruf von stopPropagation() nicht aufgerufen.

IE vor IE9 unterstützt die stopPropagation()-Methode nicht, setzt aber die cancelBubble-Eigenschaft des Ereignisobjekts auf true, um eine weitere Ausbreitung des Ereignisses zu verhindern.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

js Ausführliche Erläuterung zur Bestimmung, ob der Client auf das Internet zugreifen kann

Dynamischer BetriebWas sind die Methoden für js/css-Dateien

Konfigurationsmethoden für die Verwendung von Sass in Vue-Projekten_vue.js

Das obige ist der detaillierte Inhalt vonDetaillierte Antworten auf Ereignisse in JS (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!