js-Ereignishandler, die beim JavaScript-Lernen häufig anzutreffen sind

Es gibt drei Hauptmethoden, um Ereignishandler für Ereignisse anzugeben. 1. HTML-Ereignishandler: Erstens ist diese Methode veraltet. 2. DOM-Level-0-Ereignishandler: Diese Methode ist einfach und browserübergreifend, kann jedoch nur einen zu einem Element hinzufügen . Ereignisbehandlungsfunktion; 3. Ereignishandler auf DOM2-Ebene: Ereignishandler auf DOM2-Ebene kann mehrere Ereignishandler für ein Element hinzufügen.

1. Ereignishandler

Wie bereits erwähnt, ist ein Ereignis eine bestimmte Aktion, die vom Benutzer oder vom Browser selbst ausgeführt wird. Beispiele wie „Click“, „Load“ und „Mouseover“ sind allesamt Ereignisnamen. Die Funktion, die auf ein Ereignis reagiert, wird als Event-Handler (auch Event-Handler, Event-Handler genannt) bezeichnet. Der Name des Event-Handlers beginnt mit „on“, daher lautet der Event-Handler für das Click-Ereignis „onclick“ und der Event-Handler für das Load-Ereignis „onload“.

Es gibt drei Hauptmethoden, um Ereignishandler für Ereignisse anzugeben.

1. HTML-Ereignishandler

Zuallererst ist diese Methode veraltet. Denn Aktion (Javascript-Code) und Inhalt (HTML-Code) sind eng miteinander verbunden. Beim Schreiben einer kleinen Demo kann es jedoch weiterhin verwendet werden.

In dieser Methode gibt es zwei Methoden, die beide einfach sind:

Die erste: Definieren Sie den Ereignishandler und die enthaltenen Aktionen direkt in HTML.

Der Code lautet wie folgt:

Zweitens: Event-Handler in HTML definieren, Durchgeführte Aktionen rufen an anderer Stelle definierte Aufrufskripte auf.

Der Code lautet wie folgt:

<script>function showMessage(){ warning("clicked! "); }</script>

Hinweis:

1) Auf das Ereignis selbst kann direkt über die Ereignisvariable zugegriffen werden, z as onclick="alert(event .type)" wird ein Klickereignis anzeigen.

2) Dieser Wert entspricht dem Zielelement des Ereignisses, bei dem das Zielelement eingegeben wird. Beispielsweise kann onclick="alert(this.value)" den Wert des Eingabeelements abrufen.

2. DOM-Level-0-Ereignishandler

Diese Methode ist einfach und browserübergreifend, kann jedoch nur einen Ereignishandler zu einem Element hinzufügen.

Da diese Methode den Elementen mehrere Ereignishandler hinzufügt, überschreiben die späteren die vorherigen.

Ereignishandler hinzufügen:

<input type="button" value="click me!" onclick="showMessage()"/>
<script>
function showMessage(){
 alert("clicked!");
}
</script>

Ereignishandler löschen:

Der Code lautet wie folgt:

myBtn.onclick=null;

3. DOM2-Level-Event-Handler

DOM2-Level-Event-Handler kann mehrere Event-Handler für ein Element hinzufügen. Es definiert zwei Methoden zum Hinzufügen und Entfernen von Event-Handlern: addEventListener() und removeEventListener().

Beide Methoden erfordern 3 Parameter: Ereignisname, Ereignisbehandlungsfunktion und boolescher Wert.

Dieser boolesche Wert ist wahr, das Ereignis wird in der Erfassungsphase verarbeitet, falsch, und das Ereignis wird in der Bubbling-Phase verarbeitet, der Standardwert ist falsch.

Ereignishandler hinzufügen: Fügen Sie nun zwei Ereignishandler für die Schaltfläche hinzu, einen zum Popup „Hallo“ und einen zum Popup „Welt“.

<input id="myBtn" type="button" value="click me!"/>
<script>
 var myBtn=document.getElementById("myBtn");
 myBtn.addEventListener("click",function(){
  alert("hello");
 },false);
 myBtn.addEventListener("click",function(){
  alert("world");
 },false);
</script>

Ereignishandler entfernen: Über addEventListener hinzugefügte Ereignishandler müssen über RemoveEventListener gelöscht werden und die Parameter müssen konsistent sein.

Hinweis: Anonyme Funktionen, die über addEventListener hinzugefügt wurden, können nicht gelöscht werden. Der folgende Code funktioniert nicht!

Der Code lautet wie folgt:

myBtn.removeEventListener("click",function(){ Alert("world"); },false) ;

Es scheint, dass der Parameter „removeEventListener“ mit dem Parameter „addEventListener“ oben übereinstimmt, aber tatsächlich ist die anonyme Funktion im zweiten Parameter völlig anders.

Um also den Event-Handler zu löschen, kann der Code wie folgt geschrieben werden:

<input id="myBtn" type="button" value="click me!"/>
<script>
 var myBtn=document.getElementById("myBtn");
 var handler=function(){
  alert("hello");
 }
 myBtn.addEventListener("click",handler,false);
 myBtn.removeEventListener("click",handler,false);
</script>

2. IE-Event-Handler

1. Tatsächliche Anwendungsszenarien

IE8 und niedrigere Browser unterstützen addEventListener in der tatsächlichen Entwicklung nicht, wenn Sie mit IE8 und niedrigeren Browsern kompatibel sein möchten. Wenn Sie native Bindungsereignisse verwenden und eine Kompatibilitätsverarbeitung durchführen müssen, können Sie stattdessen die Bindung von jquery verwenden.

2. IE8-Ereignisbindung

IE8 und niedrigere Browser implementieren zwei Methoden, die denen in DOM ähneln: attachmentEvent() und detachEvent().

Beide Methoden erfordern zwei Parameter: den Event-Handler-Namen und die Event-Handler-Funktion.

Hinweis:

IE11 unterstützt nur addEventListener!

IE9 und IE10 unterstützen beide attachmentEvent und addEventListener!

TE8 und niedrigere Versionen unterstützen nur attachmentEvent!

Sie können den folgenden Code verwenden, um in verschiedenen Versionen von IE-Browsern zu testen.

<input id="myBtn" type="button" value="click me!"/>
<script>
 var myBtn=document.getElementById("myBtn");
 var handlerIE=function(){
  alert("helloIE");
 }
 var handlerDOM= function () {
  alert("helloDOM");
 }
 myBtn.addEventListener("click",handlerDOM,false);
 myBtn.attachEvent("onclick",handlerIE);
</script>

添加事件处理程序：现在为按钮添加两个事件处理函数，一个弹出“hello”,一个弹出“world

<script>
 var myBtn=document.getElementById("myBtn");
 myBtn.attachEvent("onclick",function(){
  alert("hello");
 });
 myBtn.attachEvent("onclick",function(){
  alert("world");
 });
</script>

note:这里运行效果值得注意一下：

IE8以下浏览器中先弹出“world”，再弹出“hello”。和DOM中事件触发顺序相反。

IE9及以上浏览器先弹出“hello”，再弹出“world”。和DOM中事件触发顺序相同了。

可见IE浏览器慢慢也走上正轨了。。。

删除事件处理程序:通过attachEvent添加的事件处理程序必须通过detachEvent方法删除，且参数一致。

和DOM事件一样，添加的匿名函数将无法删除。

所以为了能删除事件处理程序，代码可以这样写：

<input id="myBtn" type="button" value="click me!"/>
<script>
 var myBtn=document.getElementById("myBtn");
 var handler= function () {
  alert("hello");
 }
 myBtn.attachEvent("onclick",handler);
 myBtn.detachEvent("onclick",handler);
</script>

note:IE事件处理程序中还有一个地方需要注意：作用域。

使用attachEvent()方法，事件处理程序会在全局作用域中运行，因此this等于window。

而dom2或dom0级的方法作用域都是在元素内部，this值为目标元素。

下面例子会弹出true。

<input id="myBtn" type="button" value="click me!"/>
<script>
 var myBtn=document.getElementById("myBtn");
 myBtn.attachEvent("onclick",function(){
  alert(this===window);
 });
</script>

在编写跨浏览器的代码时，需牢记这点。

IE7\8检测：

//判断IE7\8 兼容性检测
   var isIE=!!window.ActiveXObject;
   var isIE6=isIE&&!window.XMLHttpRequest;
   var isIE8=isIE&&!!document.documentMode;
   var isIE7=isIE&&!isIE6&&!isIE8;
   if(isIE8 || isIE7){
    li.attachEvent("onclick",function(){
     _marker.openInfoWindow(_iw);
    }) 
   }else{
    li.addEventListener("click",function(){
     _marker.openInfoWindow(_iw);
    })
   }

以上所述是小编给大家介绍的JavaScript事件学习小结(二)js事件处理程序的相关知识，希望对大家有所帮助！

相关推荐：

• javaScript事件学习小结（四）event的公共成员（属性和方法）

• JavaScript事件学习小结（一）事件流

• JavaScript事件学习小结(五）js中事件类型之鼠标事件

• JavaScript事件学习小结（三）js事件对象

Das obige ist der detaillierte Inhalt vonjs-Ereignishandler, die beim JavaScript-Lernen häufig anzutreffen sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!