Detaillierte Einführung in verschiedene Arten von Event-Handlern in js

Ein Ereignis ist eine bestimmte Aktion, die vom Benutzer oder vom Browser selbst ausgeführt wird, z. B. Klicken, Laden und Mouseover sind die Namen von Ereignissen.

Der Ereignisfluss beschreibt die Reihenfolge, in der Ereignisse von der Seite empfangen werden.

Event-Handler sind Funktionen, die auf Ereignisse reagieren. Der Name des Event-Handlers beginnt mit „on“. Der Name des Event-Handlers, der dem Click-Ereignis entspricht, lautet beispielsweise onclick.

Es gibt viele Möglichkeiten, Handler für Ereignisse anzugeben, z. B.: HTML-Ereignishandler, DMO-Ereignishandler der Ebene 0, DOM-Ereignishandler der Ebene 2, IE-Ereignishandler , browserübergreifende Ereignishandler.

(1) HTML-Ereignishandler

Das heißt: Schreiben Sie den Ereignishandler in das entsprechende HTML-Tag.

zB:

<input type="button" value="click me" onclick="alert("hello")" />

Nachteile: ① Es gibt einen Zeitunterschied, wenn der Benutzer das entsprechende Ereignis auslöst, sobald das HTML-Element auf der Seite angezeigt wird, und der Ereignishandler kann möglicherweise nicht ausgeführt werden Bedingungen (z. B. wurde die aufgerufene Funktion nicht analysiert) tritt ein Fehler auf. Beispiel:

<input type="button" value="click me" onclick="message()" />

<script type="text/javascript">function message(){alert("hello world");}</script>

Da sich die aufgerufene Funktion unterhalb der Schaltfläche befindet, tritt ein Fehler auf, wenn auf die Schaltfläche geklickt wird, bevor die Nachrichtenfunktion geladen ist.

②Die Kopplung zwischen HTML- und JS-Code ist zu hoch. Wenn Sie den Ereignishandler ändern möchten, müssen Sie zwei Stellen ändern: HTML-Code und Javascript-Code.

(2) DMO-Level-0-Ereignishandler

eg:
var btn=document.getElementById("myBtn");
  btn.onclick=function(){alert(this.id)};

Hinweis: Wenn sich dieser Code nach der Schaltfläche befindet, erfolgt möglicherweise eine Zeit lang keine Reaktion, egal wie Sie darauf klicken, denn in diesem code Der Ereignishandler wird vor der Ausführung nicht angegeben.

Der Ereignishandler der DMO-Ebene 0 wird als Methode des Elements betrachtet. Mit anderen Worten: Der Ereignishandler der DMO-Ebene 0 wird im Gültigkeitsbereich des Elements ausgeführt, sodass sich dies im Programm auf das aktuelle Element bezieht. Über diese kann im Event-Handler auf alle Eigenschaften und Methoden des Elements zugegriffen werden.

Auf diese Weise hinzugefügte Ereignishandler werden während der Bubbling-Phase des Ereignisflusses verarbeitet.

Sie können den angegebenen Event-Handler auch löschen. Setzen Sie einfach das Attribut des Event-Handlers auf null.

eg:
btn.onclick=null;将处理程序设置为null以后，再点击按钮不会发生任何动作。

(3) Ereignishandler auf DOM2-Ebene

Ereignis auf DOM2-Ebene definiert zwei Methoden zum Angeben und Löschen von Ereignishandlern. Diese beiden Operationen sind: addEventListener() und removeEventListner(). Alle DOM-Knoten enthalten diese beiden Methoden. Sie müssen drei Parameter akzeptieren: den zu verarbeitenden Ereignisnamen, die Verarbeitungsfunktion und den booleschen Wert. Wenn der letzte boolesche Parameter wahr ist, bedeutet dies, dass der Handler in der Erfassungsphase aufgerufen wird. Wenn er falsch ist, bedeutet dies, dass der Ereignishandler in der Bubbling-Phase aufgerufen wird.

Um beispielsweise einen Event-Handler für das Klicken auf eine Schaltfläche hinzuzufügen, können Sie den folgenden Code verwenden:

var btn=document.getElementById("myBtn");
btn.addEventListner("onclick",function(){alert("hello world");false});这里添加的事件处理程序也是依附于元素的的作用域

Der Vorteil der Verwendung von DOM2-Event-Handlern besteht darin, dass Sie mehrere Event-Handler für hinzufügen können das gleiche Element.

例：var btn=getElementById("myBtn");
btn.addEventListner("click",function(){alert(this.id);},flase);
btn.addEventListner("click",function(){alert("hello world");},flase);

Ergebnis: Zuerst wird die ID angezeigt, dann „Hallo Welt“.

Über addEventListner() hinzugefügte Ereignishandler können nur über removeEventListner entfernt werden. Die zum Entfernen verwendeten Parameter sind dieselben wie zum Hinzufügen eines Event-Handlers. Noch ein Hinweis: Anonyme Funktionen, die über addEventListner hinzugefügt wurden, können nicht gelöscht werden.

(4) IE-Ereignishandler.

Die Funktionen für das Hinzufügen und Löschen von Event-Handlern sind: attachmentEvent() und detachEvent(); diese beiden Funktionen erhalten die gleichen zwei Parameter: Event-Handler-Name und Event-Handler-Funktion. Da IE nur das Event-Bubbling unterstützt, werden über attachmentEvent hinzugefügte Event-Handler zur Bubbling-Phase hinzugefügt.

例如：var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){alert("hello world");});

IE Bei Verwendung der Methode attachmentEvent ist der Bereich des Event-Handlers der globale Bereich, also entspricht dieser dem Fenster. (Dies ist beim Schreiben von browserübergreifendem Code sehr wichtig.)

Ähnlich wie addEventListner kann die Methode attachmentEvent() auch verwendet werden, um mehrere Ereignishandler zu einem Element hinzuzufügen.

eg:
var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){alert("clicked");});
btn.attachEvent("onclick",function(){alert("hello world");});

Es ist zu beachten, dass die Handler für diese Ereignisse in umgekehrter Reihenfolge ausgelöst werden , das heißt, zuerst Popup-Hallo Welt und dann Popup-Klick.

Die Verwendung von detach() wird kurz erwähnt.

(5) Browserübergreifender Ereignishandler

Um Ereignisse browserübergreifend zu verarbeiten, können Sie hauptsächlich zwei Methoden verwenden:

①Zum Isolieren verwenden Durchsuchen Sie die js-Bibliothek, die Unterschiede implementiert.

②Schreiben Sie selbst die am besten geeignete Methode zur Ereignisbehandlung. Hier kommt die Fähigkeitserkennung zum Einsatz, also die Identifizierung der Fähigkeiten des Browsers. Um sicherzustellen, dass der Code unter den meisten Browsern konsistent läuft, konzentrieren Sie sich einfach auf die Bubbling-Phase.

Die Codeschritte lauten wie folgt: Die erste zu erstellende Methode ist addHandler (wird zur Behandlung von browserübergreifenden Kompatibilitätsproblemen verwendet, hier wird kein spezifischer Code angegeben). Seine Aufgabe besteht darin, zu bestimmen, ob die DOM0-Ebene verwendet werden soll Methode oder DOM2, je nach Situation, IE-Methode zum Hinzufügen von Ereignissen. addHandler empfängt 3 Parameter: das zu bearbeitende Element, den Ereignisnamen und die Ereignishandlerfunktion. Diese Methode gehört zu einem Objekt namens EventUtil. Dieses Objekt wird hier verwendet, um Unterschiede zwischen Browsern zu verarbeiten.

Die entsprechende Methode zu addHandler ist removeHandler(), die ebenfalls dieselben Parameter akzeptiert. Die Aufgabe dieses Ereignisses besteht darin, den zuvor hinzugefügten Ereignishandler zu entfernen. Unabhängig davon, wie das Ereignis dem Objekt hinzugefügt wird, wird standardmäßig die DOM-Level-0-Methode verwendet, wenn andere Methoden ungültig sind.

使用EventUtil的方法如下：var btn=document.getElementById("myBtn");
var hander=function(){alert("hello")};//事件处理程序
EventUtil.addHandler(btn,"onclick",handler);
//其他代码
EventUtil.removeHandler(btn,"onclick",handler);
addHandler()和removeHandler()没有考虑到所有的浏览器问题，例如IE中作用域的问题，但是使用它们添加和移除事件处理程序还是足够了。

上面是我整理给大家的在js中详细介绍几种类型的事件处理程序的方式，希望今后会对大家有帮助。

相关文章：

重点解答动态加载JS脚本，一语道破

javascript中遍历EL表达式List集合中的值

如何在<script></script>标签中一样可以使用el表达式

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in verschiedene Arten von Event-Handlern in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!