ホームページ > 記事 > ウェブフロントエンド > JavaScript 登録イベントコード_JavaScript スキル

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

WBOYオリジナル: 2016-05-16 18:11:321251ブラウズ

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> { </span>alert( "test"); </div>} <div class="codebody" id="code50560">function pig(){ <br>alert("pig"); <br>} <br>window.onload = function(){ <br>document.getElementById("para").onclick = テスト; <br>document.getElementById("para").onclick = pig; <br><br><br> <br>上記の書き方だと2番目の関数しか出力できません。 <br>この時点では、attachEvent メソッドを使用する必要があります。 <br>プログラムコード<br><br><br> </div> <br>コードをコピー<br><br><br> コードは次のとおりです。 : <div class="codetitle"> <span> <a style="CURSOR: pointer" data="90081" class="copybut" id="copybut90081" onclick="doCopy('code90081')"><p id="para" title="cssrain デモ!">test</p> <u><script> </u> alert("test" ); </a>function pig(){ </span>alert("pig"); </div>window.onload = function(){ <div class="codebody" id="code90081">document.getElementById ("para") .attachEvent("onclick",test); <br>document.getElementById("para").attachEvent("onclick",pig); ><br> <br>しばらくの間、このコードにはエラーが見つかりませんでした。 <br>ある日、Firefox という名前のブラウザがあなたの視界に侵入しました。このコードを Firefox に入れて実行すると、<br>それが正しく動作しないことがわかりました。このような問題はますます増えていますが、JS プログラマーとして、これらはすべて私たちが直面しなければならないことです。 <br>このコードのプラットフォーム互換性の問題を解決するために、マニュアルを調べて、Firefox と IE の違いを学びました。 <br>Firefox でイベントを登録するには、次の順序で addEventListener メソッドを同時に使用します。 IE と互換性を持たせるには、if .. else... <br>プログラムコード<br><br><br><br><br>コードをコピー<br> </div> <br> コードは次のとおりです:<br><br> <br><p id="para" title="cssrain デモ!">test</p> <br><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"); </u>if(element.addEventListener){ // firefox, w3c </a>element.addEventListener("click",test,false); "click",pig,false); </span>} else { // つまり、</div>element.attachEvent("onclick",test); <div class="codebody" id="code71518">element.attachEvent("onclick",pig); <br>} <br></script>

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

コードをコピーします

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

test