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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:59 PM

javascript

この記事の例では、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 プログラミング設計に役立つことを願っています。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。