Beispielanalyse der Verwendung von attachmentEvent in javascript_javascript-Kenntnissen-js-Tutorial-php.cn

Beispielanalyse der Verwendung von attachmentEvent in javascript_javascript-Kenntnissen

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Freigeben： 2016-05-16 15:59:02

Original

1231 Leute haben es durchsucht

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

Nach dem Login kopieren

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);

Nach dem Login kopieren

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);

Nach dem Login kopieren

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>

Nach dem Login kopieren

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