Javascript 登録イベントの簡単な分析_JavaScript スキル

最初は最も一般的な方法です:

<p id="para" title="cssrain demo!" onclick="test()">テスト</p>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]

ある日、私たちは JavaScript が HTML 構造から分離された後、別の方法で記述されることを知りました:

<p id="para" title="cssrain demo!"> </p>テスト
[Ctrl A すべて選択 注:

外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

最後に、複数の同じイベント タイプを 1 つの要素にバインドする必要がある場合があります: <p id="para" title="cssrain demo!"></p> テスト

[Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

場合上記の書き方だと、2番目の関数しか出力できません。 現時点では、attachEvent メソッドを使用する必要があります: <p id="para" title="cssrain demo!"></p>
テスト

[Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

しばらくの間、このコードにはエラーが見つかりませんでした。
ある日、Firefox という名前のブラウザがあなたの視界に侵入しました。このコードを Firefox に入れて実行すると、

それが正しく動作しないことがわかりました。 このような問題はますます増えていますが、JS プログラマーとして、これらはすべて私たちが直面しなければならないことです。 <p id="para" title="cssrain demo!">このコードのプラットフォーム互換性の問題を解決するために、マニュアルを調べて、Firefox と IE の違いを学びました: </p>Firefox でイベントを登録するには: addEventListener メソッド、互換性を保つためにie では、to if ... else...
を使用する必要があります。 テスト

[Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

この時点で、コードは複数のプラットフォームで動作できるようになります。 <p id="para" title="cssrain demo!"></p>しかし、レベルが進むにつれて、毎回判断を下すだけでは満足できなくなり、この判断をカプセル化し、将来的にそれを直接呼び出す必要があります。
テスト

[Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、それを実行するために更新する必要があります <script> function test(){ alert("test"); } </script>]<script> function test(){ alert("test"); } window.onload = function(){ document.getElementById("para").onclick = test; } </script> <script> function test(){ alert("test"); } function pig(){ alert("pig"); } window.onload = function(){ document.getElementById("para").onclick = test; document.getElementById("para").onclick = pig; } </script>この時点で、プログラマーとしての仕事は完了です。 <script> function test(){ alert("test"); } function pig(){ alert("pig"); } window.onload = function(){ document.getElementById("para").attachEvent("onclick",test); document.getElementById("para").attachEvent("onclick",pig); } </script>途中、最も伝統的で基本的な書き方からスタートし、JsとHTMLの分離を実現し、同じ要素に対する複数のイベントの登録を実現する過程で、 の互換性の問題が見つかりました。登録されたイベント。最後に、将来の使用のためにイベントを登録するメソッドをカプセル化します。 <script> function test(){ alert("test"); } function pig(){ alert("pig"); } window.onload = function(){ var element = document.getElementById("para"); if(element.addEventListener){ // firefox , w3c element.addEventListener("click",test,false); element.addEventListener("click",pig,false); } else { // ie element.attachEvent("onclick",test); element.attachEvent("onclick",pig); } } </script><script> function test(){ alert("test"); } function pig(){ alert("pig"); } function addListener(element,e,fn){ if(element.addEventListener){ element.addEventListener(e,fn,false); } else { element.attachEvent("on" + e,fn); } } window.onload = function(){ var element = document.getElementById("para"); addListener(element,"click",test); addListener(element,"click",pig); } </script>さて、これで記事は終わりです。誰もが何かを得られたことを願っています。 。 。