新JavaScript例文辞典

イベントを追加する (addEventListener)

説明

イベントを追加するにはaddEventListener()を使います。最初のパラメータにはイベント名を文字列形式で指定します。これはクリックであれば"click"、マウスオーバーであれば"mouseover"のように指定します。間違ってon〜を付けてしまうと動作しません。addEventListener()の2番目のパラメータにイベント発生時に実行する関数(イベントハンドラ)を指定します。addEventListener()の3番目のパラメータはtrueまたはfalseを指定します。これはイベントの伝達方向を指定します。trueを指定すると「ドキュメントルートからイベント発生源のエレメントまで(キャプチャーフェーズ)、イベント発生源からドキュメントルートまで戻る(バブリングフェーズ)」、falseを指定すると「イベントが発生したエレメントからドキュメントルートまで」イベントが伝達されていきます。 addEventListener()はInternet Explorerでは動作しませんが、似たような動作をするattachEvent()が用意されています。

サンプルプログラム

window.addEventListener("load", function(){
document.getElementById("block").addEventListener("click", function(){
document.getElementById("result").innerHTML += "マウスのボタンがクリックされました<br>";
}, true);
}, true);
サンプルを実行
[戻る]