ホームページ >ウェブフロントエンド >jsチュートリアル >javascript_javascript スキルでのattachEventの使用法の分析例
javascript_javascript スキルでのattachEventの使用法の分析例
- WBOYオリジナル
- 2016-05-16 15:59:021174ブラウズ
この記事の例では、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 までご連絡ください。