Heim >Web-Frontend >Front-End-Fragen und Antworten >Welche Möglichkeiten gibt es, Ereignisse in Javascript zu binden?

Welche Möglichkeiten gibt es, Ereignisse in Javascript zu binden?

青灯夜游
青灯夜游Original
2022-02-16 13:52:085767Durchsuche

So binden Sie Ereignisse: 1. Verwenden Sie zum Binden die Anweisung „“. 2. Verwenden Sie zum Binden die Anweisung „dom object.on event name = event handler“. 3. Verwenden Sie zum Binden die Anweisung „event source.addEventListener (Ereignisname, Ereignishandler, ob erfasst werden soll)“.

Welche Möglichkeiten gibt es, Ereignisse in Javascript zu binden?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

In Javascript gibt es drei Möglichkeiten, Ereignisse zu binden:

  • Verwenden Sie das Ereignisattribut des HTML-Tags, um den Handler zu binden.

  • Verwenden Sie das Ereignisattribut der Ereignisquelle, um den Handler zu binden.

  • Verwenden Sie addEventListener( ) Bindungshandler

1. Verwenden Sie die Ereignisattributbindung von HTML-Tags, um den Handler zu binden

Grundlegende Syntax:

<标签 on事件名="事件处理程序" />

Beispiel:

<input type=’button’ onclick=’display()’ />

Beispielcode:

Welche Möglichkeiten gibt es, Ereignisse in Javascript zu binden?

Das Obige Code ist am meisten Obwohl die typische Inline-Bindung die von uns benötigten Funktionen vervollständigen kann, bindet sie Struktur + Stil + Verhalten im selben Tag, was der späteren Wartung nicht förderlich ist.

2. Verwenden Sie den Ereignisattribut-Bindungshandler der Ereignisquelle.

Grundsätzliche Syntax:

dom对象.on事件名 = 事件处理程序(通常是一个匿名函数)

Verbessern Sie die obige Frage durch die Idee der dynamischen Bindung. Der Effekt ist in der folgenden Abbildung dargestellt:

Welche Möglichkeiten gibt es, Ereignisse in Javascript zu binden?

3. Verwenden Sie addEventListener(), um den Handler zu binden

Die Verwendung des Ereignisattributs des Ereignisquellenobjekts zum Binden des Ereignishandlers ist einfach, weist jedoch einen Nachteil auf: Ein Ereignis kann nur einen Handler binden , und die anschließende Bindung eines bestimmten Event-Handlers überschreibt den zuvor gebundenen Event-Handler. In tatsächlichen Anwendungen kann ein Ereignis aus einer Ereignisquelle von mehreren Funktionen verarbeitet werden.

Wenn eine Ereignisquelle von mehreren Funktionen verarbeitet werden muss, können Sie addEventListener() (für Standardbrowser) über die Ereignisquelle aufrufen, um die Ereignisverarbeitungsfunktion zu binden und diese Anforderung zu erfüllen. Die Art und Weise, wie eine Ereignisquelle mehrere Ereignisfunktionen über Methoden bindet, besteht darin, addEventListener() mehrmals für das Ereignisquellenobjekt aufzurufen, und jeder Aufruf bindet nur eine Ereignisverarbeitungsfunktion.

addEventListener() ist eine Methode im Standard-Ereignismodell und ist für alle Standardbrowser gültig. Das Format der Verwendung von addEvent Lister() zum Binden eines Ereignishandlers ist wie folgt:

事件源.addEventListener(事件名称,事件处理程序,是否捕获);

Der Parameter „Ereignisname“ ist ein Ereignisname ohne „on“; der Parameter „ob erfasst werden soll“ ist ein boolescher Wert und die Standardeinstellung Der Wert ist falsch, wenn das Ereignis sprudelt, und wenn er wahr ist, wird die Ereigniserfassung erreicht.

Durch mehrmaliges Aufrufen von addEventListener() können Sie mehrere Event-Handler an denselben Event-Typ eines Event-Quellobjekts binden. Wenn ein Ereignis für ein Objekt auftritt, werden alle an das Ereignis gebundenen Ereignisbehandlungsfunktionen aufgerufen und nacheinander in der Reihenfolge ausgeführt, in der sie gebunden wurden. Darüber hinaus ist zu beachten, dass dies in der durch addEventListener() gebundenen Ereignisbehandlungsfunktion auf die Ereignisquelle verweist.

addEventListener()-Bindungshandler-Beispiel:

document.addEventListener(&#39;click&#39;,fn1,false);//click事件绑定fn1函数实现事件冒泡
document.addEventListener(&#39;click&#39;,fn2,true);//click事件绑定fn2函数实现事件捕获

[Verwandte Empfehlungen: Javascript-Lerntutorial]

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, Ereignisse in Javascript zu binden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn