JavaScript 関連のイベントのいくつかの概念_JavaScript スキル

クライアント側の JavaScript プログラムは、非同期のイベント駆動型プログラミング モデルを採用しています。

関連イベントのいくつかの概念:

イベントの種類: 発生したイベントの種類を説明するために使用される文字列。

イベントターゲット: イベントが発生するオブジェクト。

イベントハンドラー:

イベントを処理または応答する関数。

イベントオブジェクト:

特定のイベントに関連し、イベントに関する詳細情報が含まれるオブジェクト。 イベントの伝播:

ブラウザがイベント ハンドラーをトリガーするオブジェクトを決定するプロセス。

イベントハンドラーを登録します:

1. JavaScript オブジェクトの属性を設定します。 2. HTML タグの属性を設定します

3. addEventListener またはattachEvent (後者はIE用)

イベント伝播の 3 つの段階:

 function addEvent(target,type,handler){
   if(target.addEventListener){
     target.addEventListener(type,handler,false);
   }else{
     target.attachEvent("on"+type,function(event){return handler.call(target,event)});
   }
 }

1. 「キャプチャ」フェーズと呼ばれるターゲット処理関数の前に発生します。 2. オブジェクト自身の処理イベントを呼び出す

3. イベントの活発な段階

JavaScript では、

要素のイベント

を指定できます。

を指定するには、次の 3 つの方法があります。

1. HTML で、onclick 属性を使用します

2. JavaScript では、onclick 属性 を使用します。 3. javascipt で、addEvenListener() メソッドを使用します 3 つの方法の比較

(1) 2 番目と 3 番目のメソッドでは、イベント オブジェクトを関数に渡して、それに対応する属性を読み取ることができますが、メソッド 1 ではそれができません。
(2) 2 番目と 3 番目のオプションが推奨されます。最初のオプションはイベントからコンテンツを分離するのに役立たないため、イベント オブジェクトの関連コンテンツは使用できません。

文法の詳細

(1) 最初の方法では、onclick は大文字と小文字を区別しませんが、2 番目の方法では小文字を使用する必要があります。 HMTL では大文字と小文字が区別されませんが、JS では大文字と小文字が区別されるためです。
(2) 2 番目と 3 番目のメソッドでは、関数名を指定するときに二重引用符がありませんが、最初のメソッドは HTML 属性として二重引用符が必要です。

(3) 最初のメソッドには括弧が必要ですが、2 番目と 3 番目のメソッドには括弧が必要ありません。

完全なコード:

 onclick="clickHandler()"
 document.getElementById("jsOnClick").onclick = clickHandler2; 
 document.getElementById("addEventListener").addEventListener("click", clickHandler2);

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。