eventTarget.addEventListener( eventType, eventListener[, useCapture] )は、イベントターゲット「eventTarget」のイベントタイプ「eventType」に、イベントリスナー「eventListener」を登録するメソッド。
構文
eventTarget.addEventListener( eventType, eventListener[, useCapture] )
引数
- eventType
- イベントタイプを指定する。
- eventListener
- 登録したいイベントオブジェクトやユーザー定義関数を指定する。
- useCapture
- イベントの流れ（イベントフロー）の方向を指定する。
- 「true」を指定すると、キャプチャフェーズ。DOMツリーの上から下へ向かう流れの段階。
- 「false」を指定すると、バブリングフェーズかターゲットフェーズ。バブリングフェーズは、DOMツリーの下から上へ向かう流れの段階。
- 省略可能。初期設定値は「false」。
戻り値
なし。
サンプル
0
サンプルの動作について
「カウントアップ」ボタンをクリックする度に、ボタンの右横の数値に１を加算する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
document.getElementById( "sampleButton" ).addEventListener( "click", $countUp, false );
}
var $count = 0;
var $countUp = function() {
document.getElementById( "sampleOutput" ).innerHTML = ++$count;
}
</script>
window.onload = function () {
document.getElementById( "sampleButton" ).addEventListener( "click", $countUp, false );
}
var $count = 0;
var $countUp = function() {
document.getElementById( "sampleOutput" ).innerHTML = ++$count;
}
</script>
HTML
<p>
<button id="sampleButton">カウントアップ</button>
<span id="sampleOutput" style="margin-left: 10px;">0</span>
</p>
<button id="sampleButton">カウントアップ</button>
<span id="sampleOutput" style="margin-left: 10px;">0</span>
</p>