Web-Frontend
js-Tutorial
Wie füge ich Ereignisse zu Elementen hinzu? Drei Möglichkeiten zum Parsen von JS-Bindungsereignissen
Wie füge ich Ereignisse zu Elementen hinzu? Drei Möglichkeiten zum Parsen von JS-Bindungsereignissen
Javascript kann als Skriptsprache Ereignisse an Elemente auf der Seite binden, sodass beim Eintreten eines bestimmten Ereignisses automatisch der entsprechende Ereignishandler aufgerufen werden kann, um das Ereignis zu verarbeiten. Wie fügt man also Ereignisse zu Elementen hinzu? Der folgende Artikel stellt Ihnen drei Möglichkeiten vor, Ereignisse in JS zu binden. Ich hoffe, er wird Ihnen hilfreich sein!
Damit der Browser bei Auftreten eines Ereignisses automatisch den entsprechenden Event-Handler aufruft, um das Ereignis zu verarbeiten, muss ein Event-Handler an die Ereignisquelle gebunden werden (der gebundene Event-Handler wird auch als registrierter Event-Handler bezeichnet). ).
Es gibt drei Möglichkeiten, Event-Handler zu binden:
Verwenden Sie in HTML-Tags Ereignisattribute (z. B. onclick), um Event-Handler zu binden. Diese Methode legt den Ereignisattributwert des Tags auf den Ereignishandler fest. Diese Methode wird derzeit nicht empfohlen, da HTML und js der Wartung nicht förderlich sind.
Verwenden Sie in js das Ereignisattribut der Ereignisquelle (z. B. onclick), um die Ereignishandlerfunktion zu binden. Diese Methode legt den Ereignisattributwert des Ereignisquellenobjekts auf die Ereignisverarbeitungsfunktion fest.
Verwenden Sie in js die Methode
addEventListener(), um Ereignisse und Ereignisbehandlungsfunktionen 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 des HTML-Tags zum Binden des Ereignishandlers der Skriptcode im Ereignis verwendet wird Das Attribut darf keine Funktionsdeklaration enthalten, kann aber ein Funktionsaufruf oder eine durch Semikolons getrennte Folge von Skriptcodes sein.
【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, 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. Das Ergebnis ist in der folgenden Abbildung dargestellt.
Wenn der Event-Handler mehr als zwei Codezeilen umfasst und Sie den Event-Handler trotzdem wie in Beispiel 1 binden, wird die Lesbarkeit des Programms sehr schlecht. Sie können dies tun, indem Sie den Event-Handler als Funktion definieren und die Funktion in den Event-Eigenschaften 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 Sie aus den beiden obigen Beispielen ersehen können, vermischt das Tag-Ereignisattribut JS-Skriptcode und HTML-Tags miteinander und verstößt damit gegen das Prinzip des Webstandards, dass JS und HTML getrennt werden sollten. Daher ist es nicht sinnvoll, die Ereignisattribute von HTML-Tags zum Binden von Ereignishandlern zu verwenden, und sollte in praktischen Anwendungen vermieden werden.
2. 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 lautet wie folgt:
obj im Formatobj.on事件名 = 事件处理函数
ist das Ereignisquellobjekt. Das gebundene Ereignisprogramm ist normalerweise die Definitionsanweisung einer anonymen Funktion oder ein Funktionsname.
Beispiel für den Ereignisattributbindungshandler der Ereignisquelle:
oBtn.onclick = function(){//oBtn为事件源对象，它的单击事件绑定了一个匿名函数定义
alert('hi')
};【Beispiel 3】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 Dokumentfenster-Ladeereignisses und das Klickereignis der beiden Schaltflächen. Die Verarbeitung dieser drei Ereignisse wird durch die Bindung der Ereignisverarbeitungsfunktion mithilfe des Ereignisattributs der Ereignisquelle erreicht. Das Ladeereignis und das Klickereignis der ersten Schaltfläche sind an anonyme Funktionen gebunden, während das Klickereignis der zweiten Schaltfläche gebunden ist zu einer anonymen Funktion. Es wird ein Funktionsname ermittelt.
Es ist wichtig zu beachten, dass Sie nach dem durch oBtn2 gebundenen Funktionsnamen kein „()“ hinzufügen können, da die gebundene Funktion sonst zu einem Funktionsaufruf wird, der automatisch aufgerufen und ausgeführt wird, wenn die JS-Engine diese Codezeile ausführt. Es wird 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.
Die Verwendung des Ereignisattributs des Ereignisquellenobjekts zum Binden des Ereignishandlers ist einfach, weist jedoch einen Nachteil auf: Nur ein Ereignis Ein Handler kann gebunden werden, und die später gebundene Event-Handler-Funktion überschreibt die zuvor gebundene Event-Handler-Funktion. In tatsächlichen Anwendungen kann ein Ereignis aus einer Ereignisquelle von mehreren Funktionen verarbeitet werden.
当一个事件源需要使用多个函数来处理时，可以通过事件源调用 addEventListener()（针对标准浏览器）来绑定事件处理函数以实现此需求。一个事件源通过方法绑定多个事件函数的实现方式是：对事件源对象调用多次 addEventListener()，其中每次的调用只绑定一个事件处理函数。
addEventListener() 是标准事件模型中的一个方法，对所有标准浏览器都有效。使用 addEvent Liste ner() 绑定事件处理程序的格式如下：
事件源.addEventListener(事件名称,事件处理函数名,是否捕获);
参数“事件名称”是一个不带“on”的事件名；参数“是否捕获”是一个布尔值，默认值为 false，取 false 时实现事件冒泡，取 true 时实现事件捕获。
通过多次调用 addEventListener() 可以为一个事件源对象的同一个事件类型绑定多个事件处理函数。当对象发生事件时，所有该事件绑定的事件处理函数就会按照绑定的顺序依次调用执行。另外，需要注意的是，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 vonWie füge ich Ereignisse zu Elementen hinzu? Drei Möglichkeiten zum Parsen von JS-Bindungsereignissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
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)
Heiße Themen
1393
52
So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript
Dec 17, 2023 pm 02:54 PM
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.
WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen
Dec 17, 2023 pm 05:30 PM
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
Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems
Dec 17, 2023 pm 12:09 PM
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
So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript
Dec 17, 2023 am 09:39 AM
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.
JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems
Dec 17, 2023 pm 05:13 PM
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
Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode
Jan 05, 2024 pm 06:08 PM
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 verwenden Sie insertBefore in Javascript
Nov 24, 2023 am 11:56 AM
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).
JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Bildverarbeitungssystems
Dec 17, 2023 am 08:41 AM
JavaScript ist eine in der Webentwicklung weit verbreitete Programmiersprache, während WebSocket ein Netzwerkprotokoll für die Echtzeitkommunikation ist. Durch die Kombination der leistungsstarken Funktionen beider können wir ein effizientes Echtzeit-Bildverarbeitungssystem erstellen. In diesem Artikel wird erläutert, wie dieses System mithilfe von JavaScript und WebSocket implementiert wird, und es werden spezifische Codebeispiele bereitgestellt. Zunächst müssen wir die Anforderungen und Ziele des Echtzeit-Bildverarbeitungssystems klären. Angenommen, wir haben ein Kameragerät, das Bilddaten in Echtzeit sammeln kann
