Heim > Web-Frontend > js-Tutorial > Welche Methoden gibt es für die JavaScript-Ereignisbindung?

Welche Methoden gibt es für die JavaScript-Ereignisbindung?

青灯夜游
Freigeben: 2023-01-07 11:47:40
Original
6085 Leute haben es durchsucht

Bindungsmethode: 1. Verwenden Sie die Anweisung „object.on event name = function(){code}“ zum Binden. 2. Verwenden Sie die Anweisung „event source.addEventListener(event name, event processing function name, when to Capture); " Anweisungsbindung; 3. Verwenden Sie das Attribut „onclick“ im HTML-Tag, um das Ereignis zu binden.

Welche Methoden gibt es für die JavaScript-Ereignisbindung?

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

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

Eine Möglichkeit, HTML und JS zu trennen, besteht darin, den Ereignishandler mithilfe des Ereignisattributs der Ereignisquelle zu binden. Das Bindungsformat ist wie folgt:

obj.on事件名 = 事件处理函数
Nach dem Login kopieren

obj im Format ist das Ereignisquellobjekt. Das gebundene Ereignisprogramm ist normalerweise die Definitionsanweisung einer anonymen Funktion oder ein Funktionsname.

Beispiel für einen Ereignisattributbindungshandler der Ereignisquelle:

oBtn.onclick = function(){//oBtn为事件源对象,它的单击事件绑定了一个匿名函数定义
      alert('hi')
};
Nach dem Login kopieren

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

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

事件源.addEventListener(事件名称,事件处理函数名,是否捕获);
Nach dem Login kopieren

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() Beispiel für einen Bindungshandler:

document.addEventListener('click',fn1,false);//click事件绑定fn1函数实现事件冒泡
document.addEventListener('click',fn2,true);//click事件绑定fn2函数实现事件捕获
Nach dem Login kopieren

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

Es ist zu beachten, dass bei Verwendung des Ereignisattributs des HTML-Tags zum Binden des Ereignishandlers Skriptcode in Ereigniseigenschaften darf keine Funktionsdeklarationen enthalten, kann aber ein Funktionsaufruf oder eine Reihe von Skriptcodes sein, die durch Semikolons getrennt sind.

Beispiel: Binden Sie Ereignishandler mithilfe von Ereignisattributen von HTML-Tags.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用HTML标签的事件属性绑定事件处理程序</title>
</head>
<body>
     <input type="button" onclick="var name=&#39;张三&#39;;alert(name);" value="事件绑定测试"/>
</body>
</html>
Nach dem Login kopieren

Die Schaltfläche im obigen Code ist das Zielobjekt des Klickereignisses, das zwei Skriptcodes über das Ereignisattribut onclick des Etiketts für die Ereignisverarbeitung bindet. Nachdem der obige Code im Chrome-Browser ausgeführt wurde und der Benutzer auf die Schaltfläche klickt, wird ein Warndialogfeld angezeigt.

【Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es für die JavaScript-Ereignisbindung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage