Heim > Artikel > Web-Frontend > Welche Methoden gibt es für die JavaScript-Ereignisbindung?
Welche Methoden gibt es für die JavaScript-Ereignisbindung?
- 青灯夜游Original
- 2021-09-08 18:15:296044Durchsuche
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.
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事件名 = 事件处理函数
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')
};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(事件名称,事件处理函数名,是否捕获);
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函数实现事件捕获
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='张三';alert(name);" value="事件绑定测试"/>
</body>
</html>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!