DOM => イベント

パラメーター

パラメータ	説明
タイプ	`String`は、リッスンするイベントの名前を定義します。
リスナー	イベントが発生すると、 `Function`がトリガします。
オプション	キャプチャを設定する`Boolean` `Object`に次のプロパティを設定できる場合、オブジェクトオプションが弱くサポートされていることに注意してください。
1. キャプチャ	このタイプのイベントが登録されたリスナーにディスパッチされてからDOMツリーのその下のEventTargetにディスパッチされることを示すブール値です。
2. 一回	リスナーが追加された後に最大で1回呼び出される必要があることを示すブール値。 trueの場合、リスナーは呼び出されると自動的に削除されます。
パッシブ	リスナーがpreventDefault（）を呼び出さないことを示すブール値です。そうであれば、ユーザエージェントはそれを無視してコンソール警告を生成する必要があります。

備考

イベントの起源

イベントは、イベントをトリガーするものから開始しません（たとえば、ボタン）。

代わりに

そのパス内のすべての要素に触れ、イベントが発生しているすべての要素を通知します。イベントはまた、目的地に到着した後に元に戻って、その発生を再び要素に通知する。

キャプチャとバブリング

私たちが学んだように、イベントはDOMツリーの上から始まり、そのノードのパス内のすべてのノードを宛先に通知し、宛先に到達するとバックアップし、発生したすべての要素を通知します。

DOMツリーを下っているイベントはキャプチャフェーズにあり、DOMツリーを上っているイベントはバブリングフェーズにあります。

デフォルトでは、イベントはバブリング段階で聴かれます。これを変更するには、addEventListener関数の3番目のパラメーターを指定して、イベントが聴取されるフェーズを指定します。（ キャプチャセクションのコード例）

前書き

定義：

コンピューティングでは、イベントとは、ソフトウェアによって認識されるアクションまたはオカレンスのことで、ソフトウェアによって処理される可能性があります。コンピュータイベントは、システムによって、ユーザによって、または他の方法で生成またはトリガされ得る。 定義ソース

HTMLイベントはHTML要素に起こる「もの」です。 JavaScriptはこれらのイベントに「反応する」ことができます。 Event Listenersを介して。また、 dispatchEventを使用してカスタムイベントをトリガすることもできます。しかし、これは紹介に過ぎないので、始めましょう！

基本イベントリスナー

イベントをtarget.addEventListener(type, listener);するには、 target.addEventListener(type, listener);を呼び出しtarget.addEventListener(type, listener);

function loadImage() {
  console.log('image code here!');
}
var myButton = document.querySelector('#my-button');
myButton.addEventListener('click', loadImage);

これはmy-buttonがクリックされるたびにloadImageを起動します。

イベントリスナーは、DOMツリーの任意のノードにアタッチできます。ブラウザーでネイティブにトリガーされたすべてのイベントの完全なリストを表示するには、ここをクリックしてください。完全なイベントリストのMDNリンク

イベントリスナーの削除

removeEventListener（）メソッドは、addEventListener（）メソッドでアタッチされたイベントハンドラを削除します。

element.removeEventListener("mousemove", myFunction);

すべて（eventnameに、機能、およびオプション）内removeEventListener要素にイベントリスナーを追加するとき1セットと一致する必要があります。

.bindとremoveListener

イベントリスナーを追加するときに関数で.bindを使用すると、関数が削除されないようにして、実際に書き込むことができるeventListenerを削除します。

function onEvent() {
   console.log(this.name);
}

var bindingOnEvent = onEvent.bind(this);

document.addEventListener('click', bindingOnEvent);

...

document.removeEventListener('click', bindingOnEvent);

一度だけイベントを聴く

onceオプションが広くサポートされるまでは、イベントが最初にトリガーされると、偶数のリスナーを手動で削除する必要があります。

この小さなヘルパーは、これを達成するのに役立ちます：

Object.prototype.listenOnce = Object.prototype.listenOnce ||
  function listenOnce(eventName, eventHandler, options) {
      var target = this;
      target.addEventListener(eventName, function(e) {
          eventHandler(e);
          target.removeEventListener(eventName, eventHandler, options);
      }, options);
  }

var target = document.querySelector('#parent');
target.listenOnce("click", clickFunction, false);

* Objectプロトタイプに関数をアタッチするのはベストプラクティスではないので、このコードの最初の行を削除し、最初のパラメータとしてターゲットを追加することができます。

ドキュメントが読み込まれるのを待っています

最も一般的に使用されるイベントの1つは、スクリプトファイルと画像の両方を含む文書がロードされるのを待っています。 documentのloadイベントがこれに使用されます。

document.addEventListener('load', function() {
   console.log("Everything has now loaded!");
});

DOMオブジェクトがロードされる前にDOMオブジェクトにアクセスしようとすると、nullポインタが発生することがあります。これらは本当にデバッグするのが難しいです。これを避けるには、代わりにdocumentのDOMContentLoadedイベントを使用します。 DOMContentLoadedは、他の外部リソースを待たずにHTMLコンテンツがロードされ、初期化されていることを保証します。

document.addEventListener('DOMContentLoaded', function() {
   console.log("The document contents are now available!");
});

イベントオブジェクト

イベントオブジェクトにアクセスするには、イベントリスナーコールバック関数にeventパラメータを含めます。

var foo = document.getElementById("foo");
foo.addEventListener("click", onClick);

function onClick(event) {
  // the `event` parameter is the event object
  // e.g. `event.type` would be "click" in this case
};

e.stopPropagation（）;

HTML：

<div id="parent">
   <div id="child"></div>
</div>

Javascript：

var parent = document.querySelector('#parent');
var child = document.querySelector('#child');

child.addEventListener('click', function(e) {
   e.stopPropagation();
   alert('child clicked!');
});

parent.addEventListener('click', function(e) {
   alert('parent clicked!');
});

子がイベントの伝播を停止し、バブリングフェーズ中にイベントが聴かれるので、子をクリックすると子がトリガーされます。伝播を停止することなく、両方のイベントがトリガーされます。

e.preventDefault（）;

event.preventDefault()メソッドは、要素のデフォルトアクションを停止させます。

例えば：

送信ボタンがフォームを送信しないようにする
リンクがURLを守らないようにする

var allAnchorTags = document.querySelector('a');

allAnchorTags.addEventListener('click', function(e){
    e.preventDefault();
    console.log('anchor tags are useless now! *evil laugh*');
});

e.targetとe.currentTarget

e.currentTargetイベントがDOMを通過する際に、イベントの現在のターゲットを識別します。イベントが発生した要素を識別するevent.targetではなく、常にイベントハンドラがアタッチされている要素を参照します。

言い換えると

e.targetは、イベントディスパッチャをトリガするトリガを返します

e.currentTargetは、リスナーを割り当てたものを返します。

HTML：

<body>
   <button id="my-button"></button>
</body>

Javascript：

var body = document.body;
body.addEventListener( 'click', function(e) {
    console.log('e.target', e.target);
    console.log('e.currentTarget', e.currentTarget);
});

my-button 、

e.targetはmy-button
e.currentTargetになりますbody

イベントのバブリングとキャプチャ

DOM要素で発生したイベントは、ターゲットとする要素に影響するだけではありません。 DOM内のターゲットのいずれかの祖先もイベントに反応する可能性があります。以下の文書を検討してください。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
  <p id="paragraph">
    <span id="text">Hello World</span>
  </p>
</body>
</html>

オプションなしで各要素にリスナーを追加するだけで、スパンのクリックをトリガーします...

document.body.addEventListener('click', function(event) {
  console.log("Body clicked!");
});
window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph clicked!");
});
window.text.addEventListener('click', function(event) {
  console.log("Text clicked!");
});

window.text.click();

...イベントが各祖先にバブルアップし、途中で各クリックハンドラがトリガされます。

Text clicked!
Paragraph clicked!
Body clicked!

あなたのハンドラの1つがイベントを停止してそれ以上のハンドラをトリガしないようにするには、 event.stopPropagation()メソッドを呼び出すことができます。たとえば、2番目のイベントハンドラを次のように置き換えるとします。

window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph clicked, and that's it!");
  event.stopPropagation();
});

bodyのclickハンドラがトリガされないまま、次の出力が表示されclick 。

Text clicked!
Paragraph clicked, and that's it!

最後に、バブリングの代わりに「 キャプチャ 」中にトリガするイベントリスナを追加するオプションがあります。イベントが要素からその祖先まで泡立つ前に、先祖を介して最初に要素に「捕捉」されます。キャプチャリスナーは、 addEventListenerオプションの第3引数としてtrueまたは{capture: true}を指定することで追加されtrue 。上記の最初の例に以下のリスナーを追加した場合：

document.body.addEventListener('click', function(event) {
  console.log("Body click captured!");
}, true);
window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph click captured!");
}, true);
window.text.addEventListener('click', function(event) {
  console.log("Text click captured!");
}, true);

次の出力が得られます：

Body click captured!
Paragraph click captured!
Text click captured!
Text clicked!
Paragraph clicked!
Body clicked!

デフォルトでは、イベントはバブリング段階で聴かれます。これを変更するには、addEventListener関数の3番目のパラメーターを指定して、イベントが聴取されるフェーズを指定します。（キャプチャとバブリングについては、 備考を確認してください）

element.addEventListener(eventName, eventHandler, useCapture)

useCapture： trueは、DOMツリーがダウンしたときにイベントを待機することを意味します。 falseは、DOMツリーを上っている間にイベントを聴くことを意味します。

window.addEventListener("click", function(){alert('1: on bubble')}, false);
window.addEventListener("click", function(){alert('2: on capture')}, true);

アラートボックスがこの順序でポップアップ表示されます：

2：キャプチャ時
1：バブル

実際の使用例

キャプチャイベントはバブルイベントの前にディスパッチされるため、キャプチャフェーズでイベントを聴くと、イベントが最初に聴かれるよりも確実に確認できます。

親要素のclickイベントと子のclickイベントを聴いている場合は、useCaptureパラメータをどのように変更するかに応じて、最初に子または親を聴くことができます。

バブリングでは、子イベントが最初に呼び出され、キャプチャでは親が最初に呼び出されます

HTML：

<div id="parent">
   <div id="child"></div>
</div>

Javascript：

child.addEventListener('click', function(e) {
   alert('child clicked!');
});

parent.addEventListener('click', function(e) {
   alert('parent clicked!');
}, true);

親のeventListenerをtrueに設定すると親のリスナーが最初にトリガーされます。

e.stopPropagation（）と組み合わせると、イベントが子イベントリスナーまたは親をトリガーするのを防ぐことができます。（次の例の詳細について）

イベント委任

イベント委任は、特定のノードにイベントリスナーを追加することを避けるためのプロセスです。代わりに、イベントリスナーが親ノードに追加されます。このメカニズムは、イベントの伝播/バブリングを使用して、イベントが発生した要素を使用する代わりに、DOMの上位レベルの要素/ノードでイベントを処理します。たとえば、次のリスト要素のイベントを追加する必要があるとします。

<ul id="container">
    <li id="item-1" class="new">Item 1</li>
    <li id="item-2">Item 2</li>
    <li id="item-3">Item 3</li>
</ul>

clickハンドラを追加する必要があります。基本的に、ループを使用して各要素にリスナーを追加できますが、要素を動的に追加したいと考えています。したがって、DOMがロードされ、DOMが初期化され、各要素のすべてのイベントハンドラを登録した後、上記のUL新しく挿入された要素はDOMに存在しないため、clickで応答しません私たちがクリックイベントリスナーを登録したとき。

したがって、この問題を克服するために、イベント委任を活用することができます。つまり、各li要素自体にリスナーを登録するのではなく、イベントリスナーを親のUL要素にバインドすることができます。

document.getElementById("container").addEventListener("click", function(e) {
    console.log("List item " e.target.id, " was clicked!");
});

イベントはデフォルトで伝搬（気泡が上向き）するので、 LI要素をクリックするとUL要素は同じイベントを発生させます。この場合、関数内のeパラメータを使用できます。実際にはイベントオブジェクトであり、イベントを開始した元の要素を含むイベントに関する有益な情報を保持します。たとえば、次のようなものを使用できます。

document.getElementById("container").addEventListener("click", function(e) {

    // If UL itself then no action is require
    if(e.target.nodeName == 'UL') return false;

    if(e.target.classList.contains('new')) {
        console.log("List item " e.target.id, " was clicked and it's new!");
    }
});

したがって、 e （Event Object）を使用すると、ソース要素（eターゲット）を調べることができ、DOMがロードされた後に新しい要素をULに簡単に挿入でき、委任された1つのイベントハンドラだけがすべてのクリックイベントすべての要素に対して1つの関数しか宣言していないため、親UL内ではメモリ消費量も少なくなります。

カスタムイベントをトリガする

CustomEvent APIを使用すると、カスタムイベントを作成してDOMノードでトリガーし、途中でデータを渡すことができます。

event = new CustomEvent(typeArg, customEventInit);

typeArg - イベントの名前を表すDOMString

customEventInit - オプションのパラメータです（次の例ではeとして渡されます）。

eventListeners 、 documentまたはHTML要素に添付できます。

カスタムイベントが追加され、要素（またはドキュメント）にバインドされると、手動でjavascriptからイベントを発生させることができます。

document.addEventListener("event-name", function(e) {
  console.log(e.detail); // logs custom object passed from the event.
});

var event = new CustomEvent("event-name", { "param-name": "param-value" });
document.dispatchEvent(event);

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

DOM
イベント

サーチ…

パラメーター

備考

イベントの起源

代わりに

キャプチャとバブリング

前書き

基本イベントリスナー

イベントリスナーの削除

.bindとremoveListener

一度だけイベントを聴く

ドキュメントが読み込まれるのを待っています

イベントオブジェクト

e.stopPropagation（）;

e.preventDefault（）;

e.targetとe.currentTarget

イベントのバブリングとキャプチャ

実際の使用例

イベント委任

カスタムイベントをトリガする