Methode: 1. Verwenden Sie das Ereignisattribut onclick des HTML-Tags, um den Handler zu binden, die Syntax ?onclick="event handler"“ 2. Verwenden Sie das Ereignisattribut der Ereignisquelle, um den Handler zu binden, die Syntax ?obj .on event name= "Handling function"; 3. Verwenden Sie addEventListener(), um den Handler zu binden.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.
Damit der Browser beim Eintreten des Ereignisses automatisch den entsprechenden Ereignishandler aufruft, um das Ereignis zu verarbeiten, muss der Ereignishandler an die Ereignisquelle gebunden werden (der gebundene Ereignishandler wird auch als registrierter Ereignishandler bezeichnet).
Es gibt drei M?glichkeiten, Event-Handler zu binden:
Verwenden Sie das Ereignisattribut beim Klicken auf das HTML-Tag, um den Event-Handler zu binden. Diese Methode legt den Ereignisattributwert des Tags auf den Ereignishandler fest. Diese Methode wird derzeit nicht empfohlen.
Verwenden Sie das Ereignisattribut der Ereignisquelle, um die Ereignishandlerfunktion zu binden. Diese Methode legt den Ereignisattributwert des Ereignisquellenobjekts auf die Ereignisverarbeitungsfunktion fest.
Verwenden Sie die Methode ?addEventListener()“, um Ereignisse und Ereignishandler zu binden (Versionen vor IE9 verwenden die Methode ?attach Event()“.
1. Verwenden Sie das Ereignisattribut des HTML-Tags, um den Handler zu binden
Es ist zu beachten, dass bei Verwendung des Ereignisattributs eines HTML-Tags zum Binden eines Ereignishandlers der Skriptcode im Ereignisattribut keine Funktionsdeklaration enthalten kann, sondern ein Funktionsaufruf oder eine Reihe von durch Semikolons getrennten Skriptcodes sein kann
[Beispiel 1] Verwenden Sie das Ereignisattribut des HTML-Tags, um den Ereignishandler zu binden.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用HTML標簽的事件屬性綁定事件處理程序</title> </head> <body> <input type="button" onclick="var name='PHP中文網';alert(name);" value="事件綁定測試"/> </body> </html>
Die Schaltfl?che im obigen Code ist das Zielobjekt des Klickereignisses und bindet zwei Skriptcodes über das Ereignisattribut Wenn der Benutzer auf die Schaltfl?che klickt, wird nach dem Ausführen des obigen Codes ein Warndialogfeld angezeigt. Das Ergebnis ist in der folgenden Abbildung dargestellt
Wenn der Event-Handler mehr als zwei Codes umfasst und das Binden eines Event-Handlers wie in Beispiel 1 die Lesbarkeit des Programms beeintr?chtigt, k?nnen Sie den Event-Handler als Funktion definieren und die Funktion dann im Event-Attribut aufrufen [Beispiel 2] 】Das Ereignisattribut des HTML-Tags ist ein Funktionsaufruf<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML標簽的事件屬性為函數調用</title> <script> function printName(){ var name = "PHP中文網"; alert(name); } </script> </head> <body> <input type="button" onClick="printName()" value="事件綁定測試"/> </body> </html>Das Ausführungsergebnis des obigen Codes ist genau das gleiche wie in Beispiel 1. Wie aus den beiden obigen Beispielen ersichtlich ist, ist das Tag-Ereignisattribut Mischt JS-Skriptcode und HTML-Tags, was gegen die Regeln des Webstandards verst??t. Daher ist es nicht sinnvoll, Ereignisattribute von HTML-Tags zum Binden von Ereignishandlern zu verwenden, und sollte in praktischen Anwendungen vermieden werden 2. Ereignisattributbindung von Ereignisquellen verwenden
Eine M?glichkeit, HTML und JS zu trennen, besteht darin, die Ereignishandlerfunktion mithilfe des Ereignisattributs der Ereignisquelle zu binden:
obj.on事件名 = 事件處理函數Das Objekt im Format ist das Ereignisquellenobjekt. Das Ereignisprogramm ist normalerweise die Definitionsanweisung einer anonymen Funktion oder ein Funktionsname.
Beispiel für einen Ereignisattributbindungshandler der Ereignisquelle: oBtn.onclick = function(){//oBtn為事件源對象,它的單擊事件綁定了一個匿名函數定義
alert('hi')
};
] Verwenden Sie das Ereignisattribut der Ereignisquelle, um die Ereignishandlerfunktion zu binden.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用事件源的事件屬性綁定事件處理函數</title> <script> window.onload = function(){//窗口加載事件綁定了一個匿名函數 //定義一個名為fn的函數 function fn(){ alert('hello'); } //獲取事件源對象 var oBtn1 = document.getElementById("btn1"); var oBtn2 = document.getElementById("btn2"); //綁定一個匿名函數 oBtn1.onclick = function(){ alert("hi"); } //綁定一個函數名 oBtn2.onclick = fn; }; </script> </head> <body> <input type="button" id="btn1" value="綁定一個匿名函數"> <input type="button" id="btn2" value="綁定一個函數名"> </body> </html>Der obige JS-Code verarbeitet drei Ereignisse: das Laden des Dokumentfensters und das Klickereignis der beiden Schaltfl?chen Durch die Bindung der Ereignisverarbeitungsfunktion an das Ereignisattribut der Ereignisquelle werden das Ladeereignis und das Klickereignis der ersten Schaltfl?che an anonyme Funktionen gebunden, w?hrend das Klickereignis der zweiten Schaltfl?che an einen Funktionsnamen gebunden wird
Es ist wichtig zu beachten, dass es in oBtn2 nicht gebunden werden kann. Fügen Sie nach dem Funktionsnamen ?()“ hinzu, da die gebundene Funktion sonst zu einem Funktionsaufruf wird, der automatisch aufgerufen und ausgeführt wird, wenn die JS-Engine diese Codezeile ausführt. wird aber nicht ausgeführt, wenn das Ereignis ausgel?st wird.
Die Fensterladeereignisfunktion wird verarbeitet, nachdem alle Elemente des Dokuments geladen wurden, und das Klickereignis wird ausgel?st, wenn auf jede Schaltfl?che geklickt wird. Nachdem Sie auf die erste und zweite Schaltfl?che geklickt haben, werden zwei Warndialogfelder mit ?Hallo“ bzw. ?Hallo“ angezeigt.
3. Verwenden Sie addEventListener(), um den Handler zu binden.
當一個事件源需要使用多個函數來處理時,可以通過事件源調用 addEventListener()(針對標準瀏覽器)來綁定事件處理函數以實現此需求。一個事件源通過方法綁定多個事件函數的實現方式是:對事件源對象調用多次 addEventListener(),其中每次的調用只綁定一個事件處理函數。
addEventListener() 是標準事件模型中的一個方法,對所有標準瀏覽器都有效。使用 addEvent Liste ner() 綁定事件處理程序的格式如下:
事件源.addEventListener(事件名稱,事件處理函數名,是否捕獲);
參數“事件名稱”是一個不帶“on”的事件名;參數“是否捕獲”是一個布爾值,默認值為 false,取 false 時實現事件冒泡,取 true 時實現事件捕獲。
通過多次調用 addEventListener() 可以為一個事件源對象的同一個事件類型綁定多個事件處理函數。當對象發(fā)生事件時,所有該事件綁定的事件處理函數就會按照綁定的順序依次調用執(zhí)行。另外,需要注意的是,addEventListener() 綁定的事件處理函數中的 this 指向事件源。
addEventListener() 綁定處理程序示例:
document.addEventListener('click',fn1,false);//click事件綁定fn1函數實現事件冒泡 document.addEventListener('click',fn2,true);//click事件綁定fn2函數實現事件捕獲
【例 4】使用 addEventListener() 綁定事件函數。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用addEventListener()/attachEvent()綁定事件函數</title> <script> function fn1(){ alert("fn1()"); } function fn2(){ alert("fn2()"); } function bindTest(){ document.addEventListener('click',fn1,false);//首先綁定fn1函數 document.addEventListener('click',fn2,false); } bindTest();//調用函數 </script> </head> <body> </body> </html>
上述代碼在瀏覽器中運行后,當單擊文檔窗口時,會依次彈出顯示“fn1()”和“fn2()”的警告對話框。
【推薦學習:javascript高級教程】
Das obige ist der detaillierte Inhalt vonSo binden Sie Ereignisse in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Hei?e KI -Werkzeuge

Undress AI Tool
Ausziehbilder kostenlos

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!

Hei?er Artikel

Hei?e Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erl?utert. 1. WebSocket-Technologie

So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten L?sung entwickelt. In diesem Artikel wird erl?utert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.

Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularit?t des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, k?nnen wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte ausw?hlt und eine Bestellung aufgibt

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das t?gliche Leben und die Entscheidungsfindung von gro?er Bedeutung. Mit der Weiterentwicklung der Technologie k?nnen wir genauere und zuverl?ssigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist h?ufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir h?ufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erl?utert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.

Verwendung: In JavaScript wird die Methode insertBefore() verwendet, um einen neuen Knoten in den DOM-Baum einzufügen. Diese Methode erfordert zwei Parameter: den neuen Knoten, der eingefügt werden soll, und den Referenzknoten (d. h. den Knoten, an dem der neue Knoten eingefügt wird).

Einführung in die Methode zum Abrufen des HTTP-Statuscodes in JavaScript: Bei der Front-End-Entwicklung müssen wir uns h?ufig mit der Interaktion mit der Back-End-Schnittstelle befassen, und der HTTP-Statuscode ist ein sehr wichtiger Teil davon. Das Verstehen und Abrufen von HTTP-Statuscodes hilft uns, die von der Schnittstelle zurückgegebenen Daten besser zu verarbeiten. In diesem Artikel wird erl?utert, wie Sie mithilfe von JavaScript HTTP-Statuscodes erhalten, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist ein HTTP-Statuscode? HTTP-Statuscode bedeutet, dass der Dienst den Dienst anfordert, wenn er eine Anfrage an den Server initiiert
