suchen

Heim  >  Artikel  >  Web-Frontend  >  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

青灯夜游
青灯夜游nach vorne
2022-08-04 19:27:104367Durchsuche

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!

Wie füge ich Ereignisse zu Elementen hinzu? Drei Möglichkeiten zum Parsen von JS-Bindungsereignissen

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=&#39;PHP中文网&#39;;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.

Wie füge ich Ereignisse zu Elementen hinzu? Drei Möglichkeiten zum Parsen von JS-Bindungsereignissen

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 Format 
obj.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(&#39;hi&#39;)
};

【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(&#39;hello&#39;);
          }
          //获取事件源对象
          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.

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

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(&#39;click&#39;,fn1,false);//click事件绑定fn1函数实现事件冒泡
document.addEventListener(&#39;click&#39;,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(&#39;click&#39;,fn1,false);//首先绑定fn1函数   
         document.addEventListener(&#39;click&#39;,fn2,false);   
     }
     bindTest();//调用函数
</script>
</head>
<body>
</body>
</html>

上述代码在浏览器中运行后，当单击文档窗口时，会依次弹出显示“fn1()”和“fn2()”的警告对话框。

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高级教程】

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!

JavaScript chrome html Event JS 对象 事件 this
Stellungnahme：
Dieser Artikel ist reproduziert unter:biancheng.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：[Zusammenfassung] Gemeinsame Betriebsmethoden von JS-Arrays helfen Ihnen, die Entwicklungseffizienz zu verbessern!Nächster Artikel：[Zusammenfassung] Gemeinsame Betriebsmethoden von JS-Arrays helfen Ihnen, die Entwicklungseffizienz zu verbessern!

In Verbindung stehende Artikel

Mehr sehen