JavaScript イベント オブジェクトについて_JavaScript のヒント

DOM 上のイベントがトリガーされると、イベント オブジェクト イベントが生成されます。

DOM 内のイベント オブジェクト

DOM 互換ブラウザは、イベント オブジェクトをイベント ハンドラーに渡します。イベント オブジェクトには、それを作成した特定のイベントに関連するプロパティとメソッドが含まれています。除算のイベントタイプが異なり、使用できる属性メソッドが異なります。ただし、すべてのイベントには以下の表にリストされているメンバーが含まれます。

レベル 2 DOM イベント標準で定義されているプロパティは以下のとおりです:

• bubbles: イベントがバブル イベント タイプかどうかを示すブール値を返します。
  
• cancelable: イベントにキャンセル可能なデフォルト アクションを含めることができるかどうかを示すブール値を返します。
  
• currentTarget: このイベントをトリガーしたイベント リスナーの要素を返します。
  
• eventPhase: イベント伝播の現在のフェーズを返します。
  
• target: このイベントをトリガーした要素 (イベントのターゲット ノード) を返します。
  
• timeStamp: イベントが生成された日時を返します。
  
• type: 現在の Event オブジェクトによって表されるイベントの名前を返します。
  

レベル 2 DOM イベント標準で定義されているメソッドを以下に示します。 IE のイベント モデルは次のメソッドをサポートしていません:

• initEvent(): 新しく作成された Event オブジェクトのプロパティを初期化します。
• preventDefault(): イベントに関連付けられたデフォルトのアクションを実行しないようにブラウザに通知します。
• stopPropagation(): イベントをディスパッチしなくなりました。

this、ターゲット、currentTarget

イベント ハンドラー内では、オブジェクト this は常に currentTarget の値と等しくなりますが、target にはイベントの実際のターゲットのみが含まれます。イベント ハンドラーがターゲット要素に直接割り当てられている場合、this、currentTarget、および target には同じ値が含まれます。例:

var btn = document.querySelector("#btn");
btn.onclick=function () {
  console.log(event.currentTarget === this); //true
  console.log(event.target === this); //true
}

クリックイベントの対象はbtnボタンなので、これら3つの値は等しいです。イベント ハンドラーがボタンの親ノード (document.body) にある場合、これらの値は同じではありません。例:

var btn = document.querySelector("#btn");
document.body.onclick=function () {
  console.log(event.currentTarget === document.body); //true
  console.log(this === document.body); //true
  console.log(event.target === btn); //true 因为btn没有注册事件处理程序，所以该click事件就冒泡到了document.body
}

ここでは、イベント ハンドラーがこの要素に登録されているため、this と currentTarget は両方とも document.body です。ただし、ターゲット要素はクリック イベントの実際のターゲットであるため、ボタン要素と同じです。ボタンにはイベント ハンドラーが登録されていないため、クリック イベントは document.body にバブルアップされ、そこでイベントを処理できます。

1.

と入力します。

関数を通じて複数のイベントを処理する必要がある場合は、type 属性を使用できます。例:

//获取按钮
var btn = document.querySelector("#btn");
//设置多个事件
var handler = function() {
//检测事件的类型
  switch (event.type) {
    case "click":
      console.log("i click it");
      break;
    case "mouseover":
      console.log("i enter it");
      break;
    case "mouseout":
      console.log("i leave it");
      break;
  }
}
//给响应的事件赋值
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;

2.PreventDefault()

特定のイベントのデフォルトの動作を防ぐには、このメソッドを使用できます。例:

var aTags = document.getElementsByTagName("a");
for (var i = 0; i < aTags.length; i++) {
  var currentATag = aTags[i];
  currentATag.onclick = function() {
    event.preventDefault();
  }
};

上記のコードは、Web ページ上のすべての a タグのハイパーリンク機能をブロックします。 cancelable 属性が true に設定されているイベントのみが、preventDefault() を使用してデフォルトの動作をキャンセルできることに注意してください。

3. stopPropagation()

DOM 階層内のイベントの伝播を直ちに停止します。つまり、それ以降のイベントのキャプチャまたはバブリングをキャンセルします。たとえば、ボタンに直接追加されたイベント ハンドラーは、このメソッドを呼び出して、document.body に登録されたイベント ハンドラーのトリガーを回避できます。例:

var btn = document.getElementById("btn");
btn.onclick = function () {
  console.log("btn clicked");
  // event.stopPropagation();
};
window.onclick = function () {
  console.log("clicked");
};
//单击一下的结果：
//btn clicked
//clicked

別の例:

var btn = document.getElementById("btn");
btn.onclick = function () {
  console.log("btn clicked");
  event.stopPropagation();
};
window.onclick = function () {
  console.log("clicked");
};
//单击一下的结果：
//btn clicked

イベントフェーズ

この属性は、イベントが現在イベント フローのどの段階にあるかを決定するために使用されます。

• キャプチャフェーズの場合は 1 に等しくなります。
  
• ターゲットオブジェクトステージの場合は 2 に等しくなります。
  
• バブル段階の場合は 3 に相当します。
  
例:

var btn = document.getElementById("btn");

document.body.addEventListener("click", function() {
  console.log("bodyListener" + event.eventPhase);
}, true) //捕获阶段

btn.onclick = function() {
  console.log("btn" + event.eventPhase);
} //目标对象阶段，实际上属于冒泡阶段（在btn上）

document.body.onclick = function() {
  console.log("body" + event.eventPhase);
} //冒泡阶段（在body上）

別の例:

var btn = document.getElementById("btn");

document.body.addEventListener("click", function() {
  console.log(event.eventPhase); //1
  console.log(event.currentTarget); //HTMLBodyElement
}, true);

btn.addEventListener("click", function() {
  console.log(event.eventPhase); //2
  console.log(event.currentTarget); //HTMLInputElement
});

document.body.addEventListener("click", function() {
  console.log(event.eventPhase); //3
  console.log(event.currentTarget); //HTMLBodyElement
});

プロセスは大まかに次のとおりです:

document.body キャプチャ フェーズ --> ターゲット オブジェクト フェーズ --> document.body バブリング フェーズ

上記は JavaScript イベント オブジェクトに関するものです。皆さんの学習に役立つことを願っています。