JavaScript 登録イベント コード_JavaScript スキル

1 つ目は最も一般的な方法です:
プログラム コード

コードをコピー コードは次のとおりです:

test

関数 test(){
alert(" test");
}

いつか JavaScript を HTML 構造から分離する必要があることがわかったら、書き方:
プログラムコード

コードをコピー コードは次のとおりです:

< ;p id="para" title ="cssrain デモ!">test
<script> <BR>alert("test"); <BR>window.onload = function (){ <BR>document.getElementById("para").onclick = test; <BR>} <BR></script>作業はますます長くなり、時には要素に複数の同じイベント タイプをバインドする必要があります:
プログラム コード

コピー コード

コードは次のとおりです:

test

<script> { </script>alert( "test");

}

function pig(){
alert("pig");
}
window.onload = function(){
document.getElementById("para").onclick = テスト;
document.getElementById("para").onclick = pig;



上記の書き方だと2番目の関数しか出力できません。
この時点では、attachEvent メソッドを使用する必要があります。
プログラム コード

コードをコピー


コードは次のとおりです。 :

test

<script> </script> alert("test" ); function pig(){ alert("pig");

window.onload = function(){

document.getElementById ("para") .attachEvent("onclick",test);
document.getElementById("para").attachEvent("onclick",pig); >

しばらくの間、このコードにはエラーが見つかりませんでした。
ある日、Firefox という名前のブラウザがあなたの視界に侵入しました。このコードを Firefox に入れて実行すると、
それが正しく動作しないことがわかりました。 このような問題はますます増えていますが、JS プログラマーとして、これらはすべて私たちが直面しなければならないことです。
このコードのプラットフォーム互換性の問題を解決するために、マニュアルを調べて、Firefox と IE の違いを学びました。
Firefox でイベントを登録するには、次の順序で addEventListener メソッドを同時に使用します。 IE と互換性を持たせるには、if .. else...
プログラム コード




コードをコピー

コードは次のとおりです:

test

<script> <BR>alert("test"); <BR>} <div class="codetitle">function pig(){ <span>alert("pig"); <a style="CURSOR: pointer" data="71518" class="copybut" id="copybut71518" onclick="doCopy('code71518')">window.onload = function(){ <U> var element = document.getElementById("para"); if(element.addEventListener){ // firefox, w3c element.addEventListener("click",test,false); "click",pig,false); } else { // つまり、element.attachEvent("onclick",test); <div class="codebody" id="code71518">element.attachEvent("onclick",pig); <BR>} <BR></script>


この時点で、コードは複数のプラットフォームで動作する準備が整いました。
しかし、レベルが向上するにつれて、毎回判断を行うだけでは満足できなくなり、この判断をカプセル化し、将来的には直接呼び出す必要があります。
プログラム コード




コードをコピーします


コードは次のとおりです:

test p>
<script> <BR>function test(){ alert("test"); <BR>function pig(){ <BR>alert("pig"); 🎜>} <BR>function addListener(element,e,fn){ <BR>if(element.addEventListener){ <div class="codetitle">element.addEventListener(e,fn,false)} else { <span>element; .attachEvent("on " e,fn); <a style="CURSOR: pointer" data="53764" class="copybut" id="copybut53764" onclick="doCopy('code53764')">} <U>} window.onload = function(){ var element = document.getElementById("para");要素,"クリック" ,test); addListener(要素,"クリック",pig); <div class="codebody" id="code53764"><BR><BR>この時点で、プログラマーとしての仕事は終わりです。 <BR>途中、最も伝統的で基本的な書き方からスタートし、JsとHTMLの分離を実現し、同じ要素に対する複数のイベントの登録を実現する過程で、 の互換性の問題が見つかりました。登録されたイベント。最後に、将来の使用のためにイベントを登録するメソッドをカプセル化します。</script>