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>Eine Möglichkeit, HTML und JS zu trennen, besteht darin, die Ereignishandlerfunktion mithilfe des Ereignisattributs der Ereignisquelle zu binden:
obj.on事件名 = 事件处理函数
Beispiel für einen Ereignisattributbindungshandler der Ereignisquelle: ] Verwenden Sie das Ereignisattribut der Ereignisquelle, um die Ereignishandlerfunktion zu binden. oBtn.onclick = function(){//oBtn为事件源对象，它的单击事件绑定了一个匿名函数定义
alert('hi')
};Nach dem Login kopieren
<!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>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() 可以为一个事件源对象的同一个事件类型绑定多个事件处理函数。当对象发生事件时，所有该事件绑定的事件处理函数就会按照绑定的顺序依次调用执行。另外，需要注意的是，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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
