jsのイベントオブジェクトを深く理解しましょう

JS でよく使用されるイベントは次の通りです。

ページイベント: load;
フォーカスイベント: フォーカス、ぼかし。
マウスイベント: クリック、マウスアウト、マウスオーバー、マウス移動など。
キーボードイベント: keydown、keyup、keypress;
フォームイベント: リセット、送信;
コンテンツ変更イベント: 変更、入力

では、JS の「イベントオブジェクト」とは一体何でしょうか?

まず、イベントとは何でしょうか？

まず、JS はいくつかの動的な操作を実装するために使用され、ユーザーはフォームの送信、マウスのクリックなどの機能を実装したい場合があり、そのためにはブラウザーでこのイベントをトリガーする必要があります。次に、ブラウザーはユーザーの行動を認識 (またはキャプチャ) し、イベントに応答して処理します。これをイベントと呼びます。

では、イベントオブジェクトを生成する理由は何でしょうか?

ほとんどの場合、イベントのトリガーはユーザーが実行したいアクションです。つまり、ユーザーがいつイベントをトリガーするかはわかりません。さらに、イベントの伝播メカニズムにより、どのノードでイベントがトリガーされるかさえわかりません。これは頭の痛い問題です。

この問題を解決するために、イベントが発生した後、システムはそれを解決するために作成したイベントハンドラー (コード) を呼び出します。

すると、イベントオブジェクトとは何かという疑問が生じます。

ハンドラを呼び出すと、システムはイベントに関するすべての情報をオブジェクトにカプセル化し、それをパラメータとしてリスニング関数 (イベントハンドラ) に渡します。したがって、このオブジェクトはイベントオブジェクトと呼ばれます。

イベントの種類に応じて、イベントオブジェクトに含まれる情報も異なります。たとえば、クリックイベントの場合は、マウスクリックの水平座標と垂直座標が含まれ、キーボードイベントの場合は、キーボードキーの値などが含まれます。

<本文>
 <div id="div">
 <p>ppp</p>
 </div>
 <入力タイプ="テキスト" 値="" id="i">
</本文>
<スクリプト>
var d = document.getElementById('div');
//マウスイベント d.addEventListener('click',function(e){
 コンソールログ(e);
});
var i = document.getElementById('i');
//キーボードイベント i.addEventListener('keydown',k);
関数k(e){
 コンソールログ(e);
}
</スクリプト>

イベントオブジェクトの意味がわかったので、イベントオブジェクトのプロパティとメソッドを見てみましょう。

（１）一般的な属性：

event.bubbles: 現在のイベントがバブルするかどうかを示すブール値を返します。

event.eventPhase: 伝播フェーズにおけるイベントストリームの位置を示す整数値を返します。

0: イベントは現在発生していません。
1: イベントは現在キャプチャフェーズにあります。
2: イベントがターゲットノードに到達します。
3: イベントは盛り上がり段階にあります。

event.type: 大文字と小文字を区別してイベントタイプを示す文字列を返します。

event.timeStamp: イベントが発生した時刻を示すミリ秒のタイムスタンプを返します。

clientX、clientY: マウスイベントのX、Y座標を取得します。

イベントオブジェクト

（２）イベントプロキシ／デリゲートプロパティ：

event.target: イベントトリガーへの参照。トリガーイベントが発生したノードを返します。（ポイント）

event.currentTarget: イベントが現在配置されているノード、つまり実行中のリスニング関数がバインドされているノードを返します。（ただ理解するだけ）

 var d = document.getElementById('d');
 d.onclick = 関数(e){
 //イベントノードを返します console.log(e.currentTarget);
 //トリガーノードに戻る console.log(e.target);
 }

イベントプロキシ (イベント委任) の意味: イベントはバブリング段階で親ノードに上向きに伝播するため、子ノードのリスニング関数を親ノード上に定義することができ、親ノードのリスニング関数は複数の子要素のイベントを均一に処理します。このメソッドはイベントプロキシと呼ばれ、イベントプロキシまたはイベント委任とも呼ばれます。

<ヘッド>
 <タイトル></タイトル>
 <メタ文字セット="UTF-8">
 <スタイル>
 div{パディング: 40px}
 #div3{幅: 300px;高さ: 300px;境界線: 1px 赤一色;}
 #div2{幅: 200px;高さ: 200px;境界線: 1px 赤一色;}
 #div1{幅: 100px;高さ: 100px;境界線: 1px 赤一色}
 </スタイル>
</head>
<本文>
 <div id="div3">div3
 <div id="div2">div2
  <div id="div1">div1</div>
 </div>
 </div>
</本文>
<スクリプト>
 var d = document.getElementById('div3');
 d.onclick = 関数(e){
 e.target.style.background = '赤';
 }
</スクリプト>

上記のコードによると、3 つの div の位置はおおよそ次のようになります。各 div をクリックすると、div 全体が赤に変わります。主に、e.target はクリックによってトリガーされたノードを返します。

(3) ブラウザのデフォルト動作を防止し、イベントの伝播を防ぐ方法 event.preventDefault(): この方法は、ブラウザが現在のイベントのデフォルト動作を実行しないようにします。たとえば、リンクをクリックするとブラウザは指定されたページにジャンプします。または、スペースバーを押すとページが一定距離下にスクロールします。 event.stopPropagation(): このメソッドは、DOM 構造内でイベントが伝播し続けるのを停止し、他のノードで定義されたリスニング関数のトリガーを防ぎます。

<本文>
 <div id="div2">2
 <div id="div1">1
  <a id="a" href="Baidu 2">私の明るい月の匂いはますます嗅ぎたくなる</a>
 </div>
 </div>
</本文>
<スクリプト>
 var d2 = document.getElementById('div2');
 var d1 = document.getElementById('div1');
 var a = document.getElementById('a');
 d2.onclick = 関数(e){
 アラート('d2');
 }
 d1.onclick = 関数(e){
 アラート('d1');
 }
 a.onclick = 関数(e){
 //イベントの伝播を停止します e.stopPropagation();
 警告('a');
 //ブラウザのデフォルトの動作を防止する e.preventDefault();
 }
</スクリプト>

イベントオブジェクトを使用して、簡単な例を実装します。マウスに追従する div (イベントオブジェクトの XY 値を変更することによって)

<本文>
 <div id="div2">2
 <div id="div1">1
  <a id="a" href="Baidu 2">私の明るい月の匂いはますます嗅ぎたくなる</a>
 </div>
 </div>
</本文>
<スクリプト>
 var d2 = document.getElementById('div2');
 var d1 = document.getElementById('div1');
 var a = document.getElementById('a');
 d2.onclick = 関数(e){
 アラート('d2');
 }
 d1.onclick = 関数(e){
 アラート('d1');
 }
 a.onclick = 関数(e){
 //イベントの伝播を停止します e.stopPropagation();
 警告('a');
 //ブラウザのデフォルトの動作を防止する e.preventDefault();
 }
</スクリプト>