ホーム » JavaScript DOM » JavaScriptイベント

JavaScriptイベント

概要: このチュートリアルでは、JavaScriptイベント、イベントモデル、イベントの処理方法について学習します。

JavaScriptイベント入門

イベントとは、Webブラウザが検出して応答できるアクションのことです。例えば、マウスクリックやページの読み込みなどです。

たとえば、ユーザーがボタンをクリックしたときに警告を表示したい場合などです。

イベントには、イベントハンドラと呼ばれる、イベント発生時に実行される関数を含めることができます。イベントハンドラは、イベントリスナーとも呼ばれ、イベントをリッスンし、イベントが発生したときに実行されます。

id が btn のボタンがあるとします。

<button id="btn">Click Me!</button>Code language: HTML, XML (xml)

ボタンがクリックされたときに実行される関数を定義するには、addEventListener() メソッドを使用してイベントハンドラを登録する必要があります。

let btn = document.querySelector('#btn');

function handleClick() {
    alert('It was clicked!');
}

btn.addEventListener('click', handleClick);Code language: JavaScript (javascript)

仕組み

  • まず、querySelector() メソッドを使用して、id が btn のボタンを選択します。
  • 次に、イベントハンドラとして handleClick() という関数を定義します。
  • 3 番目に、addEventListener() を使用してイベントハンドラを登録します。これにより、ユーザーがボタンをクリックすると、display() 関数が実行されます。

イベントハンドラを登録するより短い方法は、すべてのコードを無名関数に配置することです。次のようにします。

let btn = document.querySelector('#btn');

btn.addEventListener('click',function() {
    alert('It was clicked!');
});Code language: JavaScript (javascript)

または、アロー関数を使用することもできます。

let btn = document.querySelector('#btn');

btn.addEventListener('click',() => {
    alert('It was clicked!');
});Code language: JavaScript (javascript)

イベントフロー

次のHTMLドキュメントがあると仮定します。

<!DOCTYPE html>
<html>
<head>
    <title>JS Event Demo</title>
</head>
<body>
    <div id="container">
        <button id='btn'>Click Me!</button>
    </div>
</body>Code language: HTML, XML (xml)

ボタンをクリックすると、クリックイベントはボタンだけでなく、ボタンのコンテナである div とWebページ全体でも発生します。

イベントフローは、イベントが発生した要素からページでイベントが受信され、DOMツリーを介して伝播される順序を説明します。

主なイベントモデルは2つあります。

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

イベントバブリング

イベントバブリングモデルでは、イベントは最も具体的な要素から開始され、最も具体的な要素 (document または window) に向かって上方向に流れます。

ボタンをクリックすると、click イベントは次の順序で発生します。

  1. ボタン
  2. id が container の div
  3. body
  4. html
  5. document

click イベントは、クリックされた要素であるボタンで最初に発生します。次に、click イベントはDOMツリーを上に移動し、document オブジェクトに到達するまで、そのパスに沿って各ノードで発生します。

次の図は、ユーザーがボタンをクリックしたときのイベントバブリングの効果を示しています。

JavaScript event bubbling

最新のWebブラウザは、イベントを window オブジェクトまでバブルアップすることに注意してください。

イベントキャプチャリング

イベントキャプチャリングモデルでは、イベントは最も具体的な要素から開始され、最も具体的な要素に向かって下方向に流れます。

ボタンをクリックすると、click イベントは次の順序で発生します。

  1. document
  2. html
  3. body
  4. id が container の div
  5. ボタン

次の図は、イベントキャプチャリングの効果を示しています。

JavaScript event capturing

DOMレベル2イベントフロー

DOMレベル2イベントは、イベントフローに3つのフェーズがあることを指定しています。

  • まず、イベントキャプチャリングが発生し、イベントをインターセプトする機会が提供されます。
  • 次に、実際のターゲットがイベントを受信します。
  • 最後に、イベントバブリングが発生し、イベントへの最終的な応答が可能になります。

次の図は、ユーザーがボタンをクリックしたときのDOMレベル2イベントモデルを示しています。

JavaScript DOM Level 2 Event

イベントオブジェクト

イベントが発生すると、Webブラウザは Event オブジェクトをイベントハンドラに渡します。

let btn = document.querySelector('#btn');

btn.addEventListener('click', function(event) {
    console.log(event.type);
});Code language: JavaScript (javascript)

出力

'click'Code language: JavaScript (javascript)

次の表に、event オブジェクトの最も一般的に使用されるプロパティとメソッドを示します。

プロパティ/メソッド説明
bubblesイベントがバブルアップする場合はtrue
cancelableイベントのデフォルトの動作をキャンセルできる場合はtrue
currentTargetイベントが発生している現在の要素
defaultPreventedpreventDefault() が呼び出された場合は true を返します。
detailイベントに関する詳細情報
eventPhaseキャプチャリングフェーズの場合は1、ターゲットの場合は2、バブリングの場合は3
preventDefault()イベントのデフォルトの動作をキャンセルします。このメソッドは、cancelable プロパティが true の場合にのみ有効です。
stopPropagation()それ以上のイベントキャプチャリングまたはバブリングをキャンセルします。このメソッドは、bubbles プロパティが true の場合にのみ使用できます。
targetイベントのターゲット要素
type発生したイベントのタイプ

event オブジェクトは、イベントハンドラ内でのみアクセスできることに注意してください。すべてのイベントハンドラが実行されると、イベントオブジェクトは自動的に破棄されます。

preventDefault()

イベントのデフォルトの動作を防ぐには、preventDefault() メソッドを使用します。

たとえば、リンクをクリックすると、ブラウザは href 属性で指定されたURLに移動します。

<a href="https://javascripttutorial.dokyumento.jp/">JS Tutorial</a>Code language: HTML, XML (xml)

ただし、event オブジェクトの preventDefault() メソッドを使用することで、この動作を防ぐことができます。

let link = document.querySelector('a');

link.addEventListener('click',function(event) {
    console.log('clicked');
    event.preventDefault();
});Code language: JavaScript (javascript)

preventDefault() メソッドは、イベントがDOMをバブルアップするのを停止しないことに注意してください。イベントは、その cancelable プロパティが true の場合にキャンセルできます。

stopPropagation()

stopPropagation() メソッドは、DOMツリーを介したイベントのフローを直ちに停止します。ただし、ブラウザのデフォルトの動作は停止しません。

次の例を参照してください。

let btn = document.querySelector('#btn');

btn.addEventListener('click', function(event) {
    console.log('The button was clicked!');
    event.stopPropagation();
});

document.body.addEventListener('click',function(event) {
    console.log('The body was clicked!');
});
Code language: JavaScript (javascript)

stopPropagation() メソッドがない場合、コンソールウィンドウに2つのメッセージが表示されます。

ただし、ボタンの click イベントハンドラで stopPropagation() が呼び出されたため、click イベントは body に到達しません。

まとめ

  • イベントとは、Webブラウザで発生したアクションのことです。たとえば、マウスクリックなどです。
  • イベントフローには、イベントバブリングとイベントキャプチャリングの2つの主要なモデルがあります。
  • DOMレベル2イベントは、イベントフローに3つのフェーズがあることを指定しています。イベントバブリング、正確な要素で発生するイベント、イベントキャプチャリングです。
  • addEventListener() を使用して、イベントをイベントリスナーに接続するイベントを登録します。
  • event オブジェクトは、イベントリスナー内でのみアクセスできます。
  • preventDefault() メソッドを使用して、イベントのデフォルトの動作を防ぎますが、イベントフローは停止しません。
  • stopPropagation() メソッドを使用して、DOMツリーを介したイベントのフローを停止しますが、ブラウザのデフォルトの動作はキャンセルしません。

クイズ

このチュートリアルは役に立ちましたか？
Getting the Width and Height of an Element
前へ
要素の幅と高さを取得する
次へ
JavaScriptでのイベント処理
Handling Events in JavaScript