JavaScriptイベントハンドラー–JSでイベントを処理する方法

イベントとは何ですか?

イベントは、要素のクリック、フィールドへの入力、ページの読み込みなど、ユーザーがページを操作したときに発生するアクションです。

ブラウザは、何かが発生したこと、およびそれを処理する必要があることをシステムに通知します。これはevent handler、特定のタイプのイベントをリッスンする、と呼ばれる関数を登録することによって処理されます。

「イベントを処理する」とはどういう意味ですか?

簡単に言えば、これを考えてみましょう。地元のコミュニティで開催されるWeb開発のミートアップイベントに参加することに興味があるとしましょう。

これを行うには、「Women Who Code」と呼ばれる地元の交流会に登録し、通知を購読します。このようにして、新しい交流会がスケジュールされるたびに、アラートが表示されます。それがイベント処理です!

ここでの「イベント」は、新しいJSミートアップです。新しいミートアップが投稿されると、ウェブサイトmeetup.comがこの変更をキャッチし、それによってこのイベントを「処理」します。次に、通知が行われるため、イベントに対して「アクション」が実行されます。

ブラウザでは、イベントは同様に処理されます。ブラウザは変更を検出し、特定のイベントをリッスンしている関数(イベントハンドラ)に警告します。これらの関数は、必要に応じてアクションを実行します。

clickイベントハンドラーの例を見てみましょう。

 Press 1 Press 2 Press 3 const buttonContainer = document.querySelector('.buttons'); console.log('buttonContainer', buttonContainer); buttonContainer.addEventListener('click', event => { console.log(event.target.value) }) 

さまざまな種類のイベントは何ですか?

イベントは、ユーザーがページを操作するたびにトリガーできます。これらのイベントは、ユーザーがページをスクロールしたり、アイテムをクリックしたり、ページを読み込んだりする可能性があります。

ここにいくつかの一般的なイベントがあります- onclickdblclickmousedownmouseupmousemovekeydownkeyuptouchmovetouchstarttouchendonloadonfocusonbluronerror onscroll

イベントのさまざまなフェーズ-キャプチャ、ターゲット、バブル

イベントがDOM内を移動するとき(バブリングアップであろうとトリクルダウンであろうと)、それはイベント伝播と呼ばれます。イベントはDOMツリーを介して伝播します。

イベントは、バブリングフェーズとキャプチャフェーズの2つのフェーズで発生します。

トリクルフェーズとも呼ばれるキャプチャフェーズでは、イベントはイベントの原因となった要素に「トリクルダウン」します。

ルートレベルの要素とハンドラーから始まり、要素に伝播します。イベントがに到達すると、キャプチャフェーズが完了しtargetます。

バブルフェーズでは、イベントはDOMツリーまで「バブル」されます。最初にキャプチャされ、最も内側のハンドラー(イベントが発生した要素に最も近いハンドラー)によって処理されます。次に、より高いレベルのDOMツリー、さらにその親、そして最後にそのルートにバブルアップ(または伝播)します。

彼女はあなたがこれを覚えるのを助けるためのトリックです:

trickle down, bubble up 

これは、これを非常によく説明するquirksmodeのインフォグラフィックです。

 / \ ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 | | | | | ------------------------- | | Event BUBBLING | ----------------------------------- | | ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 \ / | | | ------------------------- | | Event CAPTURING | ----------------------------------- 

注意すべき点の1つは、どちらのフェーズでイベントハンドラーを登録する場合でも、両方のフェーズが常に発生することです。デフォルトでは、すべてのイベントがバブルします。

関数を使用して、フェーズ、バブリング、またはキャプチャのいずれかのイベントハンドラを登録できますaddEventListener(type, listener, useCapture)。場合useCaptureに設定されfalse、イベントハンドラは、バブリング段階です。それ以外の場合は、キャプチャフェーズにあります。

イベントのフェーズの順序は、ブラウザによって異なります。

どのブラウザが最初にキャプチャを尊重するかを確認するには、JSfiddleで次のコードを試すことができます。

Child One

const childOne = document.getElementById("child-one"); const childOneHandler = () => { console.log('Captured on child one') } const childOneHandlerCatch = () => { console.log('Captured on child one in capture phase') } childOne.addEventListener("click", childOneHandler); childOne.addEventListener("click", childOneHandlerCatch, true); 

Firefox、Safari、およびChromeでは、出力は次のとおりです。

キャプチャフェーズのイベントが最初に発生します

イベントの聴き方

イベントを聞くには2つの方法があります。

  1. addEventListener
  2. などのインラインイベント onclick
//addEventListener document.getElementByTag('a').addEventListener('click', onClickHandler); //inline using onclick Click me 

どちらが良いaddEventListenerですか-インラインイベントまたは?

  1. addEventListener 無制限のイベントハンドラーを登録する機能を提供します。
  2. removeEventListener イベントハンドラーを削除するためにも使用できます
  3. このuseCaptureフラグを使用して、イベントをキャプチャフェーズで処理する必要があるかバンドルフェーズで処理する必要があるかを示すことができます。

コード例と実写

JSFiddleでこれらのイベントを試して、遊んでみることができます。

Child One

Child Two

const wrapperDiv = document.getElementById("wrapper-div"); const childOne = document.getElementById("child-one"); const childTwo = document.getElementById("child-two"); const childOneHandler = () => { console.log('Captured on child one') } const childTwoHandler = () => { console.log('Captured on child two') } const wrapperDivHandler = () => { console.log('Captured on wrapper div') } const childOneHandlerCatch = () => { console.log('Captured on child one in capture phase') } const childTwoHandlerCatch = () => { console.log('Captured on child two in capture phase') } const wrapperDivHandlerCatch = () => { console.log('Captured on wrapper div in capture phase') } childOne.addEventListener("click", childOneHandler); childTwo.addEventListener("click", childTwoHandler); wrapperDiv.addEventListener("click", wrapperDivHandler); childOne.addEventListener("click", childOneHandlerCatch, true); childTwo.addEventListener("click", childTwoHandlerCatch, true); wrapperDiv.addEventListener("click", wrapperDivHandlerCatch, true); 

TL; DR

イベントフェーズは、キャプチャ(DOM->ターゲット)、バブル(ターゲット-> DOM)、およびターゲットです。

イベントは、addEventListenerなどのインラインメソッドを使用してリッスンできますonclick

 addEventListener can add multiple events, whereas with onclick this cannot be done. onclick can be added as an HTML attribute, whereas an addEventListener can only be added within  elements. addEventListener can take a third argument which can stop the event propagation. 

さらに読む

//www.quirksmode.org/js/events_order.html

//jsfiddle.net/r2bc6axg/

//stackoverflow.com/questions/6348494/addeventlistener-vs-onclick

//www.w3.org/wiki/HTML/Attributes/_Global#Event-handler_Attributes

このような短いチュートリアルについていくには、ニュースレターにサインアップするか、Twitterでフォローしてください。