Exemple d'analyse de l'utilisation de attachEvent dans les compétences javascript

Exemple d'analyse de l'utilisation de attachEvent dans les compétences javascript_javascript

WBOY

Libérer： 2016-05-16 15:59:02

original

1172 Les gens l'ont consulté

L'exemple de cet article décrit l'utilisation de attachEvent en javascript. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Généralement, nous ajoutons des événements en JS comme celui-ci

obj.onclick=méthode

Cette méthode de liaison d'événements est compatible avec les navigateurs grand public, mais que se passe-t-il si le même événement est ajouté plusieurs fois à un élément ?

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

Copier après la connexion

Si vous l'écrivez comme ceci, alors seul le dernier événement lié, ici la méthode 3, sera exécuté. Pour le moment, nous ne pouvons pas utiliser onclick. Dans IE, nous pouvons utiliser la méthode attachEvent.

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

Copier après la connexion

Le format est précédé du type d'événement que vous devez ajouter, tel que onclick, onsubmit, onchange. L'ordre d'exécution est

méthode3->méthode2->méthode1

Malheureusement, cette méthode privée de Microsoft n'est pas prise en charge par Firefox et les autres navigateurs. Heureusement, ils prennent tous en charge la méthode addEventListener standard du W3C

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

Copier après la connexion

L'ordre d'exécution est méthode1->méthode2->méthode3

<!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>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.