イベントは、あなたがプログラムを書いているシステムで生じた動作、出来事を指します。システムからあなたへ、イベントとして何かあった事を知らせてくるので、必要であればそれに何らかの反応を返す事ができます。例えば、ユーザーがウェブページ上でボタンを押したとき、ある情報を表示するように反応させたいと思うかもしれません。この記事では、イベントに関する重要な概念を取り上げ、ブラウザーの中でのイベントの振る舞いを見ていきます。ここでは、全てを説明するのではなく、この段階で知っておくべき内容を取り上げます。

前提条件: コンピュータに関する基本的な知識があること。 HTML と CSS について理解していて、 JavaScript の第一歩の記事を理解していること。
目的: イベントの基本的な理論を理解すること。ブラウザーでの振る舞いを理解し、プログラミング環境が変わると、イベントの振る舞いが変わることを理解すること。

運命的なイベントの連続

先ほど説明しましたが、 events は、あなたがプログラムしているシステムの中で生じた動作や出来事です。つまり、あるイベントが起きたときに、システムはある種の信号を発します。さらに、ある種のアクションが自動的に実行されるためのメカニズムも提供します。例え話で考えてみましょう。空港の滑走路で、飛行機が離陸できる状態にあるときに、信号がパイロットに送られます。その結果、パイロットは飛行機を操縦します。

ウェブの場合は、イベントは、ブラウザーのウィンドウの中で発火されます、そしてその中に属する特定の項目に紐付く傾向にあります — これは単一の要素、要素のセット、現在のタブでロードされた HTML 文書、ブラウザー画面全体といったものです。発生するイベントは多種多様な種類があります。例をあげると。

  • ユーザーがある要素の上をマウスでクリックしたり、ある要素の上にカーソルを持ってくる
  • ユーザーがキーボードのキーを押す
  • ユーザーがブラウザー画面をリサイズしたり閉じたりする
  • ウェブページのロードの完了
  • フォームの送信
  • ビデオが再生中、停止中、再生が終わった
  • エラーの発生

ここや MDN Event リファレンスを覗いてみれば、とてもたくさんの応答可能なイベントがあるのが判るでしょう。

それぞれの利用可能なイベントにはイベントハンドラーがあり、これはイベントに発火した時に実行される (通常はユーザー定義の JavaScript 関数) コードのブロックのことです。イベントの発火に対する応答としてコードのブロックが実行されるように定義する事を、イベントハンドラを登録すると言います。イベントハンドラーは時にイベントリスナー と呼ばれる事を付記しておきます—我々の目的から見ると言い変えてもほとんど問題ないのですが、厳密に言えば一緒に動作する別のものです。イベントリスナーはイベントの発生を監視し、イベントハンドラーは発生したイベントの応答として動作するコードです。

メモ: 大事な事ですがウェブのイベントは JavaScript 言語の主要部分の一部ではありません — ブラウザーに組み込まれた JavaScript APIの一部として定義されたものです。

簡単な例

ここで何を言ってるのか説明するため、簡単な例を見てみましょう。このコースでこれまでに例の多くに使われているイベントやイベントハンドラーを見てきました、しかし、知識を固めるために整理をしましょう。続く例では、押すと背景色がランダムに変化する <button> が一つあります:

<button>Change color</button>

JavaScript はこのようになります:

var btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random()*(number+1));
}

btn.onclick = function() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

このコードでは、 btn という変数に Document.querySelector() 関数を使って取得したボタンへの参照を格納しています。それとは別にランダムな数値を返す関数も定義しています。コードの3つ目の部分はイベントハンドラーです。btn 変数は<button> 要素を指していますが、この種のオブジェクトにはたくさん発火し得るイベントがあるので、色々なイベントハンドラーが使えます。onclickイベントハンドラプロパティに、ランダムなRGB色を生成し<body>の背景色を設定するコードを抱えた匿名関数を代入する事で、クリックイベントが発火されるのを待ちかまえます。

このコードは <button> 要素でクリックイベントが発火すれば常に実行されます、 要はユーザーがクリックしたらいつでも。

この例の出力は以下のようになります:

ただのウェブページではありません

ここで言及しておくべき事は、イベントは JavaScript 固有のものではないという事です — ほとんどのプログラミング言語はいくつかのイベントモデルを持ち、その動作する方法はしばしは JavaScript の方式とは異なっています。実際、ウェブページの JavaScriptのイベントモデルは他の環境で用いられている JavaScript のイベントモデルと異なっています。

例えば、Node.js は開発者に JavaScript でネットワークとサーバーサイドのアプリケーションを構築することを可能にするとても有名な JavaScript ランタイムです。Node.js event model はイベントを待ち受けるリスナー、イベントを定期的に発生させるエミッターに依拠しています —たいして違ってないように聞こえますが、コードは極めて異なっていて、イベントリスナーを登録するon()や、一度実行したら登録を解除するイベントリスナーを登録するためのonce() のような関数を使っていきます。 HTTP connect event docs が使い方の良い例を教えてくれます。

その他の例として、WebExtensions と呼ばれる技術を使って、クロスブラウザーアドオン (ブラウザーの機能拡張) を JavaScript で作成できます。イベントモデルはウェブイベントモデルと似ていますが、ほんの少し違いがあります (イベントリスナーのプロパティはキャメルケース (例 onmessage でなく onMessage) で命名されていて、addListener 関数で結び付ける必要があります。例として runtime.onMessage page を確認してください。

学習の今の段階で、そのような他の環境について何か理解する必要はありません。イベントは異なるプログラミング環境では異なることがあるとだけ認識してください。

ウェブイベントの使用方法

関連づけたいイベントが発火した時に走らせたいイベントリスナーコードをウェブページに追加する方法はいろいろあります。このセクションでは様々なメカニズムを見ていき、どれを使うべきなのか議論していきます。

イベントハンドラープロパティ

イベントハンドラコードを代入するためのいろいろなプロパティがあり、そういったものをここまでのコースで最もたくさん見てきました。上記の例に戻りましょう。

var btn = document.querySelector('button');

btn.onclick = function() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

onclick プロパティがこの例で使用されているイベントハンドラープロパティです。ボタンで利用可能なプロパティ(例えば btn.textContentbtn.style)のうちの1プロパティに過ぎませんが、特別な種類のものです(コードを代入すると、そのコードはボタンでイベントが発火した際に実行される)。

ハンドラープロパティには、名前付き関数の関数名 (Build your own function でみられるような) を設定することもできます。こう書いても動作は同じです:

var btn = document.querySelector('button');

function bgChange() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

btn.onclick = bgChange;

利用できるイベントハンドラープロパティにはとてもたくさんの種類があります。実験してみましょう。

まずは、random-color-eventhandlerproperty.html のローカルコピーを作成し、ブラウザーで開いて下さい。これはこの記事ですでに遊んだ簡単なランダム色のサンプルです。さて、btn.onclick のところを以下の異なる値に変えてみて、結果を順に見てみて下さい:

  • btn.onfocusbtn.onblur — ボタンがフォーカスされフォーカスが外れる(Tabキーをパチパチして、ボタンをフォーカスしたり外したりしてみて)と色が変わります。これらはフォームのフィールドがフォーカスされている時にフィールドに何を入れたらいいのか示したり、フィールドの入力が終った直後に入力として正しくない値が入っている際のエラーメッセージを表示するような場合によく使われます。
  • btn.ondblclick — ダブルクリックされた場合だけ色が変わります。
  • window.onkeypress, window.onkeydown, window.onkeyup — キーボードのキーが押された時に色が変わります。keypressは普通のキー入力(ボタンを押して離して)を示しますが、keydownkeyupはキーストロークのうち押すだけ、離すだけの部分それぞれを指します。ボタンそのもののイベントハンドラに登録しても上手く動かないことに注意して下さい — windowオブジェクトに登録しなければならず、これはブラウザーのウィンドウ全体を表わしています。
  • btn.onmouseoverbtn.onmouseout — マウスポインタがボタンの上に来たときとボタンの上から外れた時に色が変わります。

いくつかのイベントはとても汎用的なのでほとんどどこでも使えます(例えばonlickハンドラはほぼ全ての要素に登録できます)が、いくつかはもっと限定的で、特定の状況でしか使えません(例えば onplay <video>のような特定の要素でのみ意味を持ちます)。

 インラインイベントハンドラー — 使っちゃだめ

あなたのコードでこんな形を見た事があるかもしれません:

<button onclick="bgChange()">Press me</button>
function bgChange() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

メモ: こちらにGitHub上のサンプルがあります (また、こちらで実際に動くところを見れます)。

ウェブ上で見かける最初期のイベントハンドラー登録方法には、上の例のようなイベントハンドラーHTML属性(インラインイベントハンドラーとも言う)があります — 属性値がイベント発生時に実行したいJavaScriptコードそのものです。上の例では<script>要素の中で定義された関数を起動していますが、直接JavsScriptそのものを属性の中に入れる事もできます。例えば:

<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>

多くのイベントハンドラプロパティと等価なHTML属性を見付けるでしょうが、使うべきではありません — こういうのは悪い方法とみなされています。ちょっとした事を手早く片づけたい時、イベントハンドラー属性を使うのが簡単に思えるかもしれませんが、あっという間に手がつけられない、効率の悪いものになってしまいます。

そもそも、あなたのHTMLとJavaScriptを混在させると、読みにくくなってしまうため、良いアイデアではありません — あなたの JavaScript は一ヶ所にまとめる方が良いです。別の一つのファイルになっていれば、それを複数のHTMLドキュメントに適用できますから。

(HTMLとJavaScriptが)一つのファイルになっているとしても、インラインイベントハンドラーは良いアイデアではありません。ボタン一つならいいですが、ボタンが100あったら? ファイルに100の属性を追加したならば、あっという間に管理していくのは悪夢と化す事でしょう。JavaScriptを使えば、ページにボタンがいくつあろうが、全部のボタンにイベントハンドラを追加するのは簡単です、こんな具合です:

var buttons = document.querySelectorAll('button'); 

for (var i = 0; i < buttons.length; i++) {
  buttons[i].onclick = bgChange;
}

Note: プログラムロジックをコンテンツから分離しておくと、あなたのサイトはサーチエンジンにとってより好ましいものになります。

addEventListener() と removeEventListener()

最新のイベント機構は Document Object Model (DOM) Level 2 Events 仕様で規定されていて、ブラウザーに新しい関数が追加されました — addEventListener()です。この関数はイベントハンドラプロパティと同じ方向性ですが、文法は明確に異なります。ランダム色の例をこんな風に書き換える事ができます:

var btn = document.querySelector('button');

function bgChange() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}   

btn.addEventListener('click', bgChange);

メモ: こちらにGitHub上のサンプルがあります (また、こちらで実際に動くところが見れます)。

addEventListener() 関数のカッコの中で、二つの引数を指定しています — ハンドラーを登録したいイベントの名前と、それに反応して実行させたいコードを含んだ関数です。匿名関数を使って、実行したいコードを全部 addEventListener() 関数の引数に書いてしまっても全く問題ありません。こんな具合です:

btn.addEventListener('click', function() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
});

この方式は、ここまでで見てきた古い方式に勝る点がいくつかあります。まず第一に、逆を行なう関数 removeEventListener()があり、以前に追加したリスナーを削除できます。例えばこうすると、このセクションの最初のコード部で追加したリスナーを削除します:

btn.removeEventListener('click', bgChange);

単純で小さなプログラムではたいした事ありませんが、大きくて複雑なプログラムでは、古く使われないイベントハンドラを除去しておくと効率が良くなります。さらに、これは例えば同じボタンに状況の違いによって異なる動作をさせる事ができるようになります — ただ適切なイベントハンドラを追加したり削除するだけで良いのです。

第二に、同じリスナーに複数のハンドラーを登録できます。
次では二つのハンドラは適用されません:

myElement.onclick = functionA;
myElement.onclick = functionB;

二行目で最初に設定したonclickの値が上書きされるからです。
ですがこれなら動きます:

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

要素がクリックされると、どちらの関数も走ります。

さらには、この方式ではもっとたくさんのパワフルな機能やオプションが使えます。それらはこの記事の範疇を少しばかり超えているので、知りたければ addEventListener()removeEventListener() のリファレンスページを見て下さい。

どの方式を使えば良い?

三つの方式のうち、イベントハンドラーHTML属性は絶対使うべきではありません — 前に書いたように、時代遅れで悪いやり方です。

他の二つはまあまあどっちでも良いです、少なくとも単純な用途では:

  • イベントハンドラープロパティーは力とオプションに欠けますが、ブラウザー間での互換性が高いです(IE8ですら動きます)。学習を始めるならここから始めるのが良いかもしれません。
  • DOMレベル2イベント(addEventListener()他)はもっとパワフルですが、もっと複雑でちょっと互換性に欠けます(IE9以降でサポート)。こちらも試していき、可能なところではこちらを使えるようになりましょう。

三番目の方式の最大の利点は、必要なときに removeEventListener() 関数でイベントハンドラコードを削除できる事、必要なときは要素に同種のリスナーを複数追加できる事です。例えば、ある要素に対してaddEventListener('click', function() { ... }) を別の関数を第二引数に指定して何回か呼ぶ事ができます。これはイベントハンドラプロパティでは、プロパティは後からセットした値で上書きされてしまうので、できません。e.g.:

element.onclick = function1;
element.onclick = function2;
etc.

Note: もし仕事でIE8より古いブラウザーをサポートするよう言われているなら、そのような古代のブラウザーは新しいものとは違ったイベントモデルを使っているため、困難にぶつかるかもしれません。でも怖がらないで。大半のJavaScriptライブラリ(例えば jQuery)には、ブラウザ間の差異をとっぱらえる関数が備わっています。勉強中のあなたがこの点について心配しすぎる必要はありません。

その他、イベントに関する概念

このセクションでは、イベントに関連するより進んだ概念について軽くさらっていきます。今の時点で完全に理解する必要があるほど重要ではありませんが、ときどき見かけることになるであろうコードのパターンがなぜそうなっているのか、理解する助けになるかもしれません。

Event objects

ときどきイベントハンドラ関数内で event、evt、単に e などと名付けられた引数を見かけるかもしれません。
これらはイベントオブジェクトと呼ばれ、イベントの追加機能や情報を提供する目的でイベントハンドラに自動的に渡されます。例えば、またランダム色の例をちょっと書き換えてみましょう:

function bgChange(e) {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}  

btn.addEventListener('click', bgChange);

目も: こちら にGitHub上のサンプルがあります (また、 こちらで実際に動くところが見れます)。

イベントオブジェクト e が関数に含まれていて、関数内で e.target — これはボタンそのもの — の背景色スタイルを設定しているのがわかるでしょう。イベントオブジェクトの target プロパティは、常にイベントが生じた要素への参照となっています。ですからこの例ではページではなくボタンの背景色がランダムに変わります。

Note: イベントオブジェクトには好きな名前を使えます — イベントハンドラ関数のカッコの中に使いたい名前を書くだけです。 e/evt/event が開発者の間でとても良く使われていますが、これらが短くて覚えやすいからです。標準に従うのはいつだって良いやり方です。

複数の要素に同じイベントハンドラを割り当てて、どれかでイベントがあったときに何かさせたいような場合、e.targetはとてつもなく有用なものです。 複数の要素に同じイベントハンドラを割り当てて、どれかでイベントがあったときに何かさせたいような場合、e.targetはとてつもなく有用なものです。例えばクリックすると見えなくなるタイルが16個あるとします。e.targetを使ってそれをただ消せるなら、もっと難解な手段で選びだすのよりも使いすいでしょう。続く例では (完全なソースコードは useful-eventtarget.html を見て下さい; ここで ライブ実行 も見られます)、16個の <div> 要素をJavaScriptで生成します。そしてこれらを全部 document.querySelectorAll()を使って選択し、ループで一つ一つに onclick ハンドラを追加して、それぞれがクリックされた時にランダムな色が表われるようにしています:

var divs = document.querySelectorAll('div');

for (var i = 0; i < divs.length; i++) {
  divs[i].onclick = function(e) {
    e.target.style.backgroundColor = bgChange();
  }
}

結果はこうです(クリックして遊んでみて下さい):

あなたが使うであろうイベントハンドラーのほとんどでは、イベントオブジェクトには標準的なプロパティと関数(メソッド)(Eventを参照して下さい)だけがあります。もっと上級者向けハンドラーでは、動作に必要な追加データを保持するために特殊なプロパティを付与するものもあります。例えば Media Recorder API には dataavailable イベントがあり、オーディオやビデオの録音や再生が終わって何か(保存したり再生したり)する準備ができたところで発火します。これに紐付く ondataavailableハンドラーのイベントオブジェクトには録音・録画データを保持する data プロパティがあり、これを使って何かしらを行なえます。

標準の動作を抑制する

ときにはイベントに付随する標準動作を止めたい場合があるでしょう。一番よくあるのは、ウェブのフォーム、例えばカスタマイズした登録フォームです。詳細を入力し終えてサブミットボタンを押した時、普通の動作ではデータがサーバの指定のページに送られて処理され、ブラウザーは"成功しました"ページにリダイレクトされたりなんやらします。

ユーザーが適切なデータを送信しなかった場合に問題が発生します — 開発者としてあなたはサーバへのデータ送信を抑止し、どこに問題があってデータを適切なものにするにはどうすればいいのか示す、ユーザーへのエラーメッセージを表示したいことでしょう。ブラウザーの中にはフォームデータの自検証機能を備えたものもありますが、多くはないので、それには頼らず自前の検証機能を実装すべきです。簡単な例を見てみましょう。

まず、あなたにあなたの姓と名を入力させる単純な HTML フォームです。

<form>
  <div>
    <label for="fname">First name: </label>
    <input id="fname" type="text">
  </div>
  <div>
    <label for="lname">Last name: </label>
    <input id="lname" type="text">
  </div>
  <div>
     <input id="submit" type="submit">
  </div>
</form>
<p></p>

 さあちょっとしたJavaScriptです — ここでは onsubmit イベントハンドラー(フォームがサブミットされるとサブミットイベントが発火します)の中で、テキストフィールドが空かどうかテストするだけのとても簡単なチェックを実装します。 もし空なら、イベントオブジェクトの preventDefault() 関数— これでフォームの送信を抑制します — を呼び、それからフォームの下にあるパラグラフに、何が問題なのかユーザーに伝えるためのエラーメッセージを表示します:

var form = document.querySelector('form');
var fname = document.getElementById('fname');
var lname = document.getElementById('lname');
var submit = document.getElementById('submit');
var para = document.querySelector('p');

form.onsubmit = function(e) {
  if (fname.value === '' || lname.value === '') {
    e.preventDefault();
    para.textContent = 'You need to fill in both names!';
  }
}

言うまでもなく弱っちいフォームの検証です — 例えばフォームに空白や数字が入っていても止められません — が、例としては十分です。結果はこうなります。

メモ: ソースコード全体については、 preventdefault-validation.html (及び ライブ実行も) をご覧ください。

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

ここで最後に説明していくのは、滅多には遭遇しませんが、理解できていないととても苦痛になるかもしれない事柄です。 ある一つの要素で同じイベントに紐付く二つのハンドラが活性化された時に何が起きるのかを説明するのが、イベントのバブリングとキャプチャリングという二種類のメカニズムです。わかりやすくするために次の例を見て下さい — show-video-box.html 例を新しいタブで開いて下さい (ソースコード もまた別のタブに)。 ライブでも下で見られます:

これは内に <video> 要素を含む <div> を表示したり隠したりするとても簡単な例です。

<button>Display video</button>

<div class="hidden">
  <video>
    <source src="rabbit320.mp4" type="video/mp4">
    <source src="rabbit320.webm" type="video/webm">
    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
  </video>
</div>

<button> がクリックされると、 <div> のクラス属性を hidden から showing に変更するので、ビデオが表示されます(例のCSSにこの二つのクラスが含まれており、それぞれはボックスの位置をスクリーンの外、内にします)。

btn.onclick = function() {
  videoBox.setAttribute('class', 'showing');
}

では二つばかり onclick イベントハンドラーを追加します — 最初のは <div> に、二つ目は <video>にです。ビデオの外側の <div> 領域がクリックされた時にはボックスがまた隠れるようにし、ビデオそのものがクリックされたらビデオが再生されるようにしたいというわけです。

videoBox.onclick = function() {
  videoBox.setAttribute('class', 'hidden');
};

video.onclick = function() {
  video.play();
};

が、ここで問題が — 今度はビデオをクリックすると再生が始まりますが、それと同時に<div>が隠されるようになってしまいました。ビデオが <div> の中にあるので(ビデオはdivの一部ですから)、ビデオのクリックは上に挙げた両方のイベントハンドラーを実際に動かします。

バブリングとキャプチャリングの説明

親要素を持つ要素 (このケースでは <video> です) においてイベントが発火すると、モダンブラウザーは二つの異なる段階に分けて動作します — キャプチャリングする段階とバブリングする段階です。

capturing の段階で行われることは……

  • 要素の最上位の親要素 (<html>onclick イベントハンドラーがキャプチャリング段階に登録されているか調べ、あればそれを実行します。
  • 次に <html> 要素の内側の要素に移って同じ事をし、また次の内側の要素にと、実際にクリックされた要素に到達するまで繰り返されます。

バブリング段階では、全く逆の事が起きます。

  • ブラウザーは実際にクリックされた要素の onclick イベントハンドラがバブリング段階に登録されていれば、それを実行します。
  • 次に直上の親要素に移動して同じ事をし、また次へ、 <html> 要素に到達するまで繰り返します。

(大きな図を見るにはクリックして下さい)

モダンブラウザーのデフォルトでは、全てのイベントハンドラーはバブリング段階に登録されます。ですのでこの例の場合では、ビデオをクリックするとクリックイベントは <video> 要素から外側の <html> 要素に進んで (バブリングして) いきます。従って:

  • video.onclick... ハンドラーがあるので実行し、最初ビデオが始まります。
  • videoBox.onclick...ハンドラーがあるので実行し、よってビデオも隠されます。

stopPropagation()で問題を解決する

困った動作ですが、解決する方法があります! 標準的なイベントオブジェクトにはstopPropagation()という関数があって、ハンドラーのイベントオブジェクトで起動されると、このハンドラーは実行されますが、イベントが上位に伝播しないようにするので、これ以上のハンドラーは実行されなくなります。

よって我々の今の問題は、先のコードブロック、第二のハンドラー関数をこのように変更して解決できます:

video.onclick = function(e) {
  e.stopPropagation();
  video.play();
};

show-video-box.html ソースコードのローカルコピーを作成してみて、自分で修正してみるか、修正された結果は show-video-box-fixed.html で見ることができます (こちらでソースコードも見られます)。

メモ: なんだってキャプチャリングとバブリングなんてあるのか? それはね、むかーしむかしの悪き時代、ブラウザーに今ほど互換性がなかった頃、ネットスケープはキャプチャリングだけを、IEはバブリングだけを使っていたのさ。 W3C が動作について標準化と合意を作ろうと決めた時、結局どっちもシステムに入れることにし、モダンブラウザーはそのように実装されたのさ。

メモ: 上で述べたように、デフォルトでイベントハンドラはバブリング段階に登録され、そしてほとんどの場合はこれが妥当です。もし本当にイベントをキャプチャリング段階の方に登録したいのであれば、addEventListener()を使って、省略可能な第三引数に true を指定すれば実現できます。

イベントの移譲

バブリングではイベント移譲という機能も活用できます — イベント移譲という概念は、たくさんある子要素のどれかしらがクリックされた際に何らかのコードを実行したいという場合に、個々の子要素一つ一つにイベントリスナーを設定するのではなく、親要素のイベントリスナーを設定すれば子要素のイベントリスナーからバブリングしてくるという事実に依拠しています。

良い例としては、一連のリストアイテムです — どれかがクリックされたらメッセージをポップアップさせたいときには、親の <ul> 要素の click イベントリスナーに設定すれば、イベントはリストアイテムからバブリングしてきます。

この概念はより深く David Walsh のブログで、たくさんの例とともに解説されています。— How JavaScript Event Delegation Works を見て下さい。

結論

ウェブイベントについて、今の学習初期段階で知るべき事は全部わかったはずです。上で述べたように、実のところイベントはJavaScriptのコアには属しません — それらはブラウザーのウェブ APIに属するものです。

また重要な事は、 JavaScript の使われ方によって異なるイベントモデルがありうる事も理解しておいて下さい — ウェブ API とブラウザーの WebExtension や Node.js (サーバーサイド JabaScript) のような領域とでは。今あなたがそれらの領域について理解しなくてよいと思っていますが、ウェブ開発の事を学んでいくのにイベントの基礎を理解するのが役立つのは確かです。

理解できない事があれば、気楽にまた記事を読み返したり、私達 に質問して下さい。

関連情報

  • Event order (discussion of capturing and bubbling) — an excellently detailed piece by Peter-Paul Koch.
  • Event accessing (discussion of the event object) — another excellently detailed piece by Peter-Paul Koch.
  • Event reference

このモジュール内の文書

ドキュメントのタグと貢献者

このページの貢献者: thinking-capybara, hysryt, mfuji09, i12o, kenji-yamasaki, t-cool
最終更新者: thinking-capybara,