Maison >interface Web >js tutoriel >Exemple d'analyse de l'utilisation de attachEvent dans les compétences javascript_javascript

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

WBOYoriginal: 2016-05-16 15:59:021173parcourir

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

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

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

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>

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Javascript imprime de manière récursive un exemple de relation hiérarchique de document Analysis_Javascript SkillsArticle suivant：Javascript imprime de manière récursive un exemple de relation hiérarchique de document Analysis_Javascript Skills

Articles Liés

Voir plus