KnowHub

#イベントオブジェクト

概要

イベントの発生後、イベント オブジェクトが生成され、パラメーターとしてリッスン関数に渡されます。ブラウザはネイティブに「Event」オブジェクトを提供し、すべてのイベントはこのオブジェクトのインスタンスであるか、「Event.prototype」オブジェクトを継承します。

「Event」オブジェクト自体は、新しいインスタンスの生成に使用できるコンストラクターです。

イベント = 新しいイベント(タイプ、オプション);

Event コンストラクターは 2 つのパラメーターを受け取ります。最初のパラメータ「type」はイベントの名前を表す文字列で、2 番目のパラメータ「options」はイベント オブジェクトの構成を表すオブジェクトです。このオブジェクトは主に以下の 2 つのプロパティを持ちます。

  • bubbles: ブール値 (オプション)。デフォルトは false で、イベント オブジェクトがバブルするかどうかを示します。
  • cancelable: ブール値 (オプション)。デフォルトは false で、イベントをキャンセルできるかどうか、つまり Event.preventDefault() を使用してイベントをキャンセルできるかどうかを示します。イベントがキャンセルされると、そのイベントはまったく発生しなかったかのようになり、そのイベントに対するブラウザのデフォルトの動作はトリガーされません。
var ev = 新しいイベント(
  '見て'、
  {
    「泡」: 本当、
    「キャンセル可能」: false
  }
);
document.dispatchEvent(ev);

上記のコードは、新しい look イベント インスタンスを作成し、dispatchEvent メソッドを使用してイベントをトリガーします。

「bubbles」属性が明示的に「true」として指定されていない場合、生成されたイベントは「キャプチャ フェーズ」中にのみリスナー関数をトリガーできることに注意してください。

// HTMLコードは
// <div><p>こんにちは</p></div>
var div = document.querySelector('div');
var p = document.querySelector('p');

関数コールバック(イベント) {
  var tag = イベント.currentTarget.tagName;
  console.log('Tag: ' + タグ); // 出力なし
}

div.addEventListener('クリック', コールバック, false);

var click = 新しいイベント('click');
p.dispatchEvent(click);

上記のコードでは、「p」要素は「click」イベントを発行しますが、デフォルトではバブルしません。 div.addEventListener メソッドはバブリングフェーズ中のリスニングを指定するため、リスニング関数はトリガーされません。 div.addEventListener('click', callback, true) と記述すると、このイベントは「キャプチャフェーズ」中に監視できます。

一方、このイベントが「div」要素で発生した場合。

div.dispatchEvent(クリック);

その後、div 要素がバブリング段階でリッスンしているかキャプチャー段階でリッスンしているかに関係なく、リッスン関数がトリガーされます。このとき、div 要素がイベントの対象であるため、バブリングの問題は発生せず、常に div 要素がイベントを受信し、リスニング機能が有効になります。

##インスタンスのプロパティ

Event.bubbles、Event.eventPhase

Event.bubbles プロパティは、現在のイベントがバブルするかどうかを示すブール値を返します。このプロパティは読み取り専用プロパティであり、通常は Event インスタンスがバブルできるかどうかを知るために使用されます。前述したように、明示的に宣言しない限り、「Event」コンストラクターによって生成されたイベントはデフォルトではバブルしません。

Event.eventPhase プロパティは、イベントの現在のフェーズを示す整数定数を返します。このプロパティは読み取り専用です。

var フェーズ = イベント.eventPhase;

Event.eventPhase の戻り値は 4 つあります。

  • 0、イベントは現在発生していません。
    1. イベントは現在キャプチャ段階にあります。つまり、祖先ノードからターゲット ノードへの伝播の過程にあります。
    1. イベントはターゲット ノード、つまり Event.target プロパティによって指されるノードに到達します。
    1. イベントはバブリング段階にあります。つまり、ターゲット ノードから祖先ノードへのバックプロパゲーションの過程にあります。

Event.cancelable、Event.cancelBubble、event.defaultPrevented

Event.cancelable プロパティは、イベントをキャンセルできるかどうかを示すブール値を返します。このプロパティは読み取り専用のプロパティであり、通常はイベント インスタンスの特性を理解するために使用されます。

ほとんどのブラウザーのネイティブ イベントはキャンセルできます。たとえば、「クリック」イベントをキャンセルすると、リンクのクリックは無効になります。ただし、明示的に宣言しない限り、「Event」コンストラクターによって生成されたイベントはデフォルトではキャンセルできません。

var evt = 新しいイベント('foo');
evt.cancelable // false

「Event.cancelable」プロパティが「true」の場合、「Event.preventDefault()」を呼び出すとイベントをキャンセルし、イベントに対するブラウザのデフォルト動作を防ぐことができます。

イベントをキャンセルできない場合、Event.preventDefault() を呼び出しても効果はありません。したがって、このメソッドを使用する前に、Event.cancelable プロパティを使用して、キャンセルできるかどうかを判断することをお勧めします。

関数PreventEvent(event) {
  if (event.cancelable) {
    イベント.preventDefault();
  } それ以外 {
    console.warn('このイベントはキャンセルできませんでした。');
    コンソール.ディレクトリ(イベント);
  }
}

Event.cancelBubble プロパティはブール値で、true に設定すると、イベントの伝播を防ぐことができる Event.stopPropagation() を実行するのと同じになります。

Event.defaultPrevented プロパティは、このイベントに対して Event.preventDefault メソッドが呼び出されているかどうかを示すブール値を返します。このプロパティは読み取り専用です。

if (event.defaultPrevented) {
  console.log('イベントはキャンセルされました');
}

Event.currentTarget、Event.target

イベントが発生すると、キャプチャとバブリングの 2 つの段階を経て、複数の DOM ノードを順番に通過します。したがって、どのイベントにもイベントに関連する 2 つのノードがあり、1 つはイベントの元のトリガー ノード (Event.target) で、もう 1 つはイベントが現在通過しているノード (Event.currentTarget) です。前者は通常、後者の子孫ノードです。

Event.currentTarget プロパティは、イベントが現在存在するノード、つまりイベントが現在通過しているノード、つまり現在実行中のリスニング関数が存在するノードを返します。イベントが伝播すると、このプロパティの値が変化します。

Event.target プロパティは、最初にイベントをトリガーしたノード、つまりイベントが最初に発生したノードを返します。このプロパティは、イベントが伝播しても変化しません。

イベントの伝播プロセス中、異なるノードのリスニング関数内の Event.target プロパティと Event.currentTarget プロパティの値は異なります。

// HTMLコードは
// <p id="para">こんにちは<em>世界</em></p>
関数 Hide(e) {
  // Hello または World のクリックに関係なく、常に true を返します
  console.log(this === e.currentTarget);

  // 「こんにちは」をクリックして true を返します
  // 「ワールド」をクリックし、false を返す
  console.log(this === e.target);
}

document.getElementById('para').addEventListener('click'、非表示、false);

上記のコードでは、<em> は <p> の子ノードです。<em> または <p> をクリックすると、listen 関数が実行されます。このとき、e.targetは常に元のクリック位置のノードを指し、e.currentTargetはイベント伝播中に経由するノードを指します。リスニング関数はイベントが通過したときにのみトリガーされるため、e.currentTarget は常にリスニング関数内の this と等価です。

イベント.タイプ

Event.type プロパティは、イベント タイプを表す文字列を返します。イベントのタイプは、イベントの生成時に指定されます。このプロパティは読み取り専用です。

var evt = 新しいイベント('foo');
evt.type // "foo"

イベント.タイムスタンプ

Event.timeStamp プロパティは、イベントの発生時間を示すミリ秒のタイムスタンプを返します。これは、Web ページの正常な読み込みに基づいて計算されます。

var evt = 新しいイベント('foo');
evt.timeStamp // 3683.6999999995896

戻り値は、ブラウザの設定に応じて、整数または小数点 (高精度タイムスタンプ) になります。

以下はマウスの移動速度を計算する例で、1 秒あたりに移動するピクセル数を示しています。

var 前の X;
var 前 Y;
var 前 T;

window.addEventListener('mousemove', function(event) {
  もし （
    前のX !== 未定義 &&
    前 Y !== 未定義 &&
    前T !== 未定義
  ) {
    var deltaX = イベント.スクリーンX - 前のX;
    var deltaY = イベント.screenY - 前の Y;
    var deltaD = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));

    var deltaT = events.timeStamp - 前の T;
    console.log(デルタD / デルタT * 1000);
  }

  前のX = イベント.画面X;
  前Y = イベント.画面Y;
  前のT = イベント.タイムスタンプ;
});

Event.isTrusted

Event.isTrusted プロパティは、イベントが実際のユーザーの行動によって生成されたかどうかを示すブール値を返します。たとえば、ユーザーがリンクをクリックすると「click」イベントが生成されます。これはユーザーによって生成され、「Event」コンストラクターによって生成されるイベントはスクリプトによって生成されます。

var evt = 新しいイベント('foo');
evt.isTrusted // false

上記のコードでは、evt オブジェクトがスクリプトによって生成されるため、isTrusted プロパティは false を返します。

イベント.詳細

Event.detail プロパティは、ブラウザー UI (ユーザー インターフェイス) イベントでのみ使用できます。このプロパティは、イベントに関する情報を表す数値を返します。具体的な意味はイベントの種類によって異なります。たとえば、「click」イベントと「dblclick」イベントの場合、「Event.detail」はマウスのクリック数です（マウスホイールの場合、「1」はシングルクリック、「2」はダブルクリック、「3」は3回のクリックを意味します）。イベントの場合、Event.detail はスクロール ホイールの正の方向の距離、負の値は負の方向の距離です。戻り値は常に 3 の倍数です。

// HTMLコードは以下の通り
// <p>こんにちは</p>
関数 giveDetails(e) {
  console.log(e.detail);
}

document.querySelector('p').onclick = giveDetails;

##インスタンスメソッド

Event.preventDefault()

Event.preventDefault メソッドは、現在のイベントに対するブラウザのデフォルトの動作をキャンセルします。たとえば、リンクをクリックした後、ブラウザはデフォルトで別のページにジャンプしますが、別の例では、スペースバーを押してページが一定の距離下にスクロールしてもジャンプしません。この方法を使用した後はスクロールします。このメソッドが有効になるための前提条件は、イベント オブジェクトの cancelable 属性が true であることです。それが false の場合、このメソッドを呼び出しても効果はありません。

このメソッドは、現在の要素に対するイベントのデフォルトの影響をキャンセルするだけであり、イベントの伝播を妨げないことに注意してください。伝播を停止したい場合は、stopPropagation() または stopImmediatePropagation() メソッドを使用できます。

// HTMLコードは
// <input type="checkbox" id="my-checkbox" />
var cb = document.getElementById('my-checkbox');

cb.addEventListener(
  'クリック'、
  関数 (e){ e.preventDefault() };
  間違い
);

上記のコードでは、ブラウザのデフォルトの動作では、クリックするとラジオ ボタン ボックスが選択されます。この動作がキャンセルされると、ラジオ ボタン ボックスは選択できなくなります。

このメソッドを使用すると、テキスト入力ボックスの検証条件を設定できます。ユーザーの入力が条件を満たさない場合、テキストボックスに文字を入力できません。

// HTMLコードは
// <input type="text" id="my-input" />
var input = document.getElementById('my-input');
input.addEventListener('keypress', checkName, false);

関数 checkName(e) {
  if (e.charCode < 97 || e.charCode > 122) {
    e.preventDefault();
  }
}

上記のコードでテキスト ボックスの「keypress」イベントのリスニング機能を設定した後は、小文字のみを入力できます。そうしないと、入力イベントのデフォルトの動作 (テキスト ボックスへの書き込み) がキャンセルされ、入力できなくなります。テキストボックスに内容を入力します。

Event.stopPropagation()

stopPropagation メソッドは、DOM 内でイベントが伝播し続けるのを防ぎ、他のノードで定義されたリスナー関数がトリガーされるのを防ぎますが、現在のノード上の他のイベント リスナー関数は含まれません。

関数 stopEvent(e) {
  e.stopPropagation();
}

el.addEventListener('click', stopEvent, false);

上記のコードでは、「click」イベントは「el」ノードの親ノードにさらにバブリングしません。

Event.stopImmediatePropagation()

Event.stopImmediatePropagation メソッドは、リスニング関数が現在のノードで定義されているか別のノードで定義されているかに関係なく、同じイベントに対する他のリスニング関数が呼び出されるのを防ぎます。つまり、このメソッドは「Event.stopPropagation()」よりも徹底的にイベントの伝播を防ぎます。

同じノードで同じイベントに対して複数のリスニング関数が指定されている場合、これらの関数は追加された順序に従って順番に呼び出されます。リスニング関数の 1 つが Event.stopImmediatePropagation メソッドを呼び出す限り、他​​のリスニング関数は実行されなくなります。

関数 l1(e){
  e.stopImmediatePropagation();
}

関数 l2(e){
  console.log('hello world');
}

el.addEventListener('click', l1, false);
el.addEventListener('click', l2, false);

上記のコードは、el ノードの click イベントに対して 2 つのリスニング関数 l1 と l2 ​​を追加します。 l1 は event.stopImmediatePropagation メソッドを呼び出すため、l2 ​​は呼び出されません。

Event.compedPath()

Event.comusedPath() は、イベントの最下位ノードと、イベントが順番にバブルするすべての上位ノードをメンバーとする配列を返します。

// HTMLコードは以下の通り
// <div>
// <p>こんにちは</p>
// </div>
var div = document.querySelector('div');
var p = document.querySelector('p');

div.addEventListener('click', function (e) {
  console.log(e.comusedPath());
}、 間違い）;
// [p, div, body, html, document, Window]

上記のコードでは、click イベントの最下位ノードは p で、その後に上から順に div、body、html、document、Window が続きます。

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章