JavaScript イベントオブジェクトについて_JavaScript のヒント-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 15:18:18

オリジナル

1040 人が閲覧しました

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 にバブルアップされ、そこでイベントを処理できます。

と入力します。

関数を通じて複数のイベントを処理する必要がある場合は、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 イベントオブジェクトに関するものです。皆さんの学習に役立つことを願っています。