検索

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

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

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

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