コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript 登録イベント コード_JavaScript スキル

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

WBOY
リリース： 2016-05-16 18:11:32
オリジナル
1268 人が閲覧しました

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

著者別の最新記事
最新の問題
モバイル ビューで、ユーザーがリンクをクリックしたときにこのナビゲーション バーを閉じるにはどうすればよいですか? ユーザーがリンクをクリックして Web サイトを閲覧すると、ナビゲーション バーが閉じませんか?ナビゲーション バーを閉じるために、クリック イベント リスナーを各リンクに追加しよ...
から 2024-04-06 19:23:03
0
1
411
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
ログインせずに Firebase を使用して Vue でユーザーを作成する ユーザープロフィールを作成するフォームを作成しました。しかし、ユーザーを作成するたびに問題が発生します。ログインおよびログアウトしたユーザー。この問題の解決にご協力ください。 co...
から 2024-04-06 14:20:12
0
1
514
React Three Fiber: スクロール イベントが遅れるのはなぜですか? ReactThreeFiber には、カメラのズーム全体にわたって保持したいスプライトを生成する React コンポーネントがあります。アルゴリズムは機能しているようですが (サイ...
から 2024-04-06 13:39:24
0
1
410
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート