suchen

Heim >Web-Frontend >js-Tutorial >Beispiele zur Erläuterung der Javascript-Registrierungsereignisverarbeitungsfunktion_Javascript-Fähigkeiten

Beispiele zur Erläuterung der Javascript-Registrierungsereignisverarbeitungsfunktion_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:20:431440Durchsuche

Ereignisse sind der Kerninhalt von JavaScript und ihre Bedeutung wird hier nicht vorgestellt. Nachdem das Ereignis ausgelöst wurde, ist eine Ereignisverarbeitungsfunktion erforderlich, um es zu verarbeiten. Beispielsweise können wir festlegen, dass der Hintergrund eines Divs auf Grün gesetzt wird. Schauen wir uns dann zunächst an, wie dies erreicht wird Dieser Effekt lautet wie folgt: 

<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript"> 
function changebg(){
 var mydiv=document.getElementById("mydiv");
 mydiv.style.backgroundColor="green";
}
</script>
</head>
<body>
 <div id="mydiv"></div>
 <button id="bt">点击查看效果</button> 
</body>
</html>

Im obigen Code wird durch Klicken auf die Schaltfläche die Hintergrundfarbe des Div auf Grün gesetzt. Dies liegt daran, dass der Code eine Ereignishandlerfunktion für das Onclick-Ereignis der Schaltfläche registriert zu grün. Lassen Sie uns anhand von Beispielen kurz vorstellen, wie Ereignisverarbeitungsfunktionen für Objektereignisse registriert werden:
Methode 1:
Registrieren Sie die Ereignisverarbeitungsfunktion direkt im HTML-Code, dh legen Sie die Ereignisverarbeitungsfunktion direkt über das HTML-Attribut fest. Der von der Ereignisverarbeitungsfunktion auszuführende Code ist der HTML-Attributwert Artikel. Die Vor- und Nachteile sind wie folgt:

  • 1. Leicht zu verstehen und zu verwenden.
  • 2. Alle gängigen Browser unterstützen diese Methode.
  • 3. Vermischt mit HTML-Code, wodurch die Seite sehr kompliziert wird und nicht mit dem Prinzip der Trennung von Leistung und Inhalt vereinbar ist.
  • 4. Es kann nur ein Ereignishandler desselben Typs für dasselbe Objekt registriert werden.

Methode 2:
Im Ereignishandle-Modus ist das sogenannte Ereignishandle eine Ereignisverarbeitungsfunktion, und das angegebene Ereignis des angegebenen Objekts entspricht einem Ereignishandler. Um eine Ereignisverarbeitungsfunktion auf diese Weise zu registrieren, müssen Sie zunächst einen Verweis auf das Objekt abrufen und dann das Ereignishandle dem entsprechenden Ereignisverarbeitungsfunktionsattribut des Objekts zuweisen. Tatsächlich ist Methode eins auch eine Art Event-Handler-Methode.
Das Codebeispiel lautet wie folgt: 

<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 var bt=document.getElementById("bt");
 bt.onclick=function(){
  mydiv.style.backgroundColor="green";
 }
}
</script>
</head>
<body>
 <div id="mydiv"></div>
 <button id="bt">点击查看效果</button>
</body>
</html>

Im obigen Code verwenden Sie zunächst document.getElementById("bt"), um einen Verweis auf das Schaltflächenobjekt abzurufen, und weisen Sie dann das Ereignishandle (Ereignisbehandlungsfunktion) dem Ereignisattribut onclick des Schaltflächenobjekts zu onclick wird ausgelöst, wenn auf die Schaltfläche geklickt wird, und führt dann den Code im Ereignishandler aus. Die Vor- und Nachteile sind wie folgt:

  • 1. Einfach und leicht verständlich.
  • Unterstützt von 2 Browsern.
  • 3. Es kann nur ein Ereignishandler desselben Typs für dasselbe Objekt registriert werden.

Methode 3:
Es handelt sich um eine erweiterte Ereignisregistrierungsmethode, nämlich den Ereignis-Listener. Diese Methode löst das Problem, dass in einem bestimmten Objekt nur eine Handlerfunktion für einen bestimmten Ereignistyp registriert werden kann. Es gibt jedoch bestimmte Kompatibilitätsprobleme, die im Folgenden vorgestellt werden:
1).IE-Browser:
Im IE-Browser können Sie die Methoden attachmentEvent() und detachEvent() verwenden, um Ereignisbehandlungsfunktionen für das angegebene Objekt zu registrieren und die registrierten Ereignisbehandlungsfunktionen zu löschen.
Das Syntaxformat ist wie folgt:
element.attachEvent("onevent",eventListener)
Diese Funktion verfügt über zwei Parameter: Der erste Parameter ist der Name des Ereignistyps und der zweite Parameter ist die zu registrierende Ereignishandlerfunktion.
Das Codebeispiel lautet wie folgt: 

<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 var bt=document.getElementById("bt");
 
 bt.attachEvent("onclick",changebg);
 
 function changebg(){
  mydiv.style.backgroundColor="green";
 }
}
</script>
</head>
<body>
 <div id="mydiv"></div>
 <button id="bt">点击查看效果</button>
</body>
</html>

Der obige Code verwendet die Funktion attachmentEvent(), um den Onclick-Ereignishandler für die Schaltfläche zu registrieren, ist jedoch nur im IE-Browser gültig. Verwenden Sie die Funktion detachEvent(), um die ursprünglich registrierte Ereignisverarbeitungsfunktion zu trennen. Das Syntaxformat lautet wie folgt:
element.detachEvent("onevent",eventListener)
Das Format ist das gleiche wie bei der Funktion attachmentEvent().
Besonderer Hinweis: Der erste Parameter muss on enthalten. Das Click-Ereignis muss beispielsweise als „onclick“ geschrieben werden.
2). Standardbrowser:
Verwenden Sie in Standardbrowsern (einschließlich IE9 und IE9 und höher) die Funktionen addEventListener() und removeEventListener(), um Registrierungsverarbeitungsfunktionen zu registrieren und zu löschen.
Das Syntaxformat ist wie folgt:
element.addEventListener('event', eventListener, useCapture);
Diese Funktion hat drei Parameter. Der erste Parameter ist der Name des Ereignistyps. Der zweite Parameter ist die zu registrierende Ereignisverarbeitungsfunktion. Die dritte Funktion gibt an, ob diese Verarbeitungsfunktion während der Erfassungsphase des Ereignisübermittlungsprozesses aufgerufen wird. Die Stufe wird aufgerufen. Unter Standardbedingungen ist der Wert dieser Eigenschaft falsch, was bedeutet, dass der Ereignishandler während der Bubbling-Stufe aufgerufen wird.
Besonderer Hinweis: Der erste Parameter darf kein on enthalten. Beispielsweise kann das Click-Ereignis nicht als „onclick“ geschrieben werden, sondern muss als „click“ geschrieben werden.
Das Codebeispiel lautet wie folgt:

<html> 
<head> 
<meta charset=" utf-8"> 
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
 width:100px;
 height:100px;
 background-color:red;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
 var mydiv=document.getElementById("mydiv");
 var bt=document.getElementById("bt");
 
 bt.addEventListener("click",changebg);
 
 function changebg(){
  mydiv.style.backgroundColor="green";
 }
}
</script>
</head>
<body>
 <div id="mydiv"></div>
 <button id="bt">点击查看效果</button>
</body>
</html>

以上代码在IE9和IE9以上或者其他标准浏览器中，点击按钮可以将div的背景颜色设置为绿色。使用removeEventListener()函数可以解除原来注册的事件处理函数，语法格式如下:
element.removeEventListener('event', eventListener, useCapture);
格式和addEventListener()函数式一样的。
跨浏览器注册事件处理函数:
只要加个判断语句即可，代码如下:

var EventUtil={
  //注册
  addHandler: function(element, type, handler){
   if (element.addEventListener){
    element.addEventListener(type, handler, false);
   } else if (element.attachEvent){
    element.attachEvent("on" + type, handler);
   } else {
    element["on" + type] = handler;
   }
  },
  //移除注册
  removeHandler: function(element, type, handler){
   if (element.removeEventListener){
    element.removeEventListener(type, handler, false);
   } else if (element.detachEvent){
    element.detachEvent("on" + type, handler);
   } else {
    element["on" + type] = null;
   }
  }       
 };

以上就是本文的详细内容，希望对大家的学习有所帮助。

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS-Methode zum Löschen des Textfeldinhalts und zum Auslösen von JS, wenn das Textfeld wiederhergestellt wird und die Maus die Textfeld_Javascript-Fähigkeiten verlässtNächster Artikel：JS-Methode zum Löschen des Textfeldinhalts und zum Auslösen von JS, wenn das Textfeld wiederhergestellt wird und die Maus die Textfeld_Javascript-Fähigkeiten verlässt

In Verbindung stehende Artikel

Mehr sehen