suchen

Heim >Web-Frontend >js-Tutorial >Beispielanalyse der Verwendung von attachmentEvent in javascript_javascript-Kenntnissen

Beispielanalyse der Verwendung von attachmentEvent in javascript_javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 15:59:021174Durchsuche

Das Beispiel in diesem Artikel beschreibt die Verwendung von attachmentEvent in Javascript. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Im Allgemeinen fügen wir Ereignisse in JS wie folgt hinzu

obj.onclick=method

Diese Methode zum Binden von Ereignissen ist mit gängigen Browsern kompatibel, aber was passiert, wenn dasselbe Ereignis mehrmals zu einem Element hinzugefügt wird?

obj.onclick=method1
obj.onclick=method2
obj.onclick=method3

Wenn Sie es so schreiben, wird nur das letzte gebundene Ereignis, hier Methode 3, ausgeführt. Zu diesem Zeitpunkt können wir den Protagonisten nicht verwenden. Im IE können wir die Methode attachmentEvent verwenden 

btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);

Vor dem Format steht der Ereignistyp, den Sie hinzufügen müssen, z. B. onclick, onsubmit, onchange. Die Ausführungsreihenfolge ist

Methode3->Methode2->Methode1

Leider wird diese private Methode von Microsoft nicht von Firefox und anderen Browsern unterstützt. Glücklicherweise unterstützen sie alle die W3C-Standardmethode addEventListener 

btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);

Die Ausführungsreihenfolge ist Methode1->Methode2->Methode3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>attachEvent</title>
<script type="text/javascript">
//第一种方式(微软的私人方法)
function iniEvent() {
  var btn = document.getElementById("btn");
  btn.attachEvent("onclick", click1);
  btn.attachEvent("onclick", click2);
  btn.attachEvent("onclick", click3);
}
//第二种方式(火狐和其他浏览器)
function iniEvent2() {
  var btn = document.getElementById("btn");
  btn.addEventListener("click", click1, false);
  btn.addEventListener("click", click2, false);
  btn.addEventListener("click", click3, false);
}
function click1() {
  alert('click1');
}
function click2() {
  alert('click2');
}
function click3() {
  alert('click3');
}
</script>
</head>
<body onload="iniEvent()">
<input type="button" id="btn" value="attachEvent" />
</body>
</html>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

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：Javascript druckt rekursiv ein Beispiel für eine hierarchische Beziehung eines Dokuments: Analysis_Javascript-FähigkeitenNächster Artikel：Javascript druckt rekursiv ein Beispiel für eine hierarchische Beziehung eines Dokuments: Analysis_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen