javascript_javascript スキルでのattachEventの使用法の分析例-jsチュートリアル-php.cn

javascript_javascript スキルでのattachEventの使用法の分析例

WBOY

リリース： 2016-05-16 15:59:02

オリジナル

1151 人が閲覧しました

この記事の例では、JavaScript でのattachEventの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

通常、このように JS でイベントを追加します

obj.onclick=メソッド

イベントをバインドするこの方法は、主流のブラウザーと互換性がありますが、同じイベントが要素に複数回追加された場合はどうなりますか?

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

ログイン後にコピー

このように書くと、最後にバインドされたイベント (ここではメソッド 3) のみが実行されます。この時点では、onclick は使用できません。IE では、attachEvent メソッドが使用できます。

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

ログイン後にコピー

形式の前に、onclick、onsubmit、onchange などのイベントタイプを追加する必要があることに注意してください。実行順序は

です。

メソッド 3->メソッド 2->メソッド 1

残念ながら、この Microsoft のプライベートメソッドは Firefox やその他のブラウザではサポートされていません。幸いなことに、これらはすべて W3C 標準の addEventListener メソッドをサポートしています。

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

ログイン後にコピー

実行順序はメソッド 1->メソッド 2->メソッド 3

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

ログイン後にコピー

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。