SYNCERのロゴ
アイキャッチ画像

EventTarget.addEventListener() - イベントの追加

addEventListener()は、EventTargetのメソッドです。1つのターゲット(要素など)に対して、1つのリスナー(コールバック関数)を追加登録します。

概要

名前
addEventListener
所属
EventTarget
IDL
void addEventListener(DOMString type, EventListener? callback, optional (AddEventListenerOptions or boolean) options);

dictionary AddEventListenerOptions : EventListenerOptions {
  boolean passive = false;
  boolean once = false;
};

callback interface EventListener {
  void handleEvent(Event event);
};

dictionary EventListenerOptions {
  boolean capture = false;
};
仕様書
https://dom.spec.whatwg.org/#dom-eventtarget-addeventlistener

説明

第1引数(type)には、イベントの種類を表す文字列を指定します。

第2引数(callback)には、イベントが発生した時に実行される関数を指定します。

第3引数(options)には、真偽値、またはオブジェクトを指定します。下記がオブジェクトに指定できるキーとその説明です。真偽値を指定した場合、captureに対するものとして扱われます。オブジェクト形式の指定(options object)は、対応ブラウザが限られているのでご注意下さい。詳しくはサポート状況をご参考下さい。

capture
初期値はfalse。trueの場合、リスナーはキャプチャリングフェイズで呼び出され、バブリングフェイズでは無視される。falseの場合、リスナーはバブリングフェイズで呼び出され、キャプチャリングフェイズでは無視される。ターゲットがイベントの発生元である場合は、どちらにしろ、ターゲットフェイズで呼び出される。
passive
初期値はfalse。trueの場合、リスナー内のpreventDefault()が無視される。trueなら、ユーザーエージェントは内部で無駄な確認処理をする必要がなくなるため、例えばスクロールがよりスムーズになるなどの効果がある。
once
初期値はfalse。trueの場合、リスナーは最初の1回だけしか呼び出されない。

チュートリアル

イベントの追加登録

ある要素にクリックイベントを追加登録する例です。

<button id="hoge">実行</button>
element = document.getElementById( "hoge" ) ;

element.addEventListener( "click", function ( event ) {
	console.log( "イベント発生!!" ) ;
} ) ;

デモです。ボタンを押すごとに1ずつ数値が増加するのを確認して下さい。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#result {
	white-space: pre-wrap ;
}
</style>
</head>
<body>
	<button id="hoge">実行</button>
<hr>
<div id="result">0</div>
<script>
/** try it! **/
var element = document.getElementById( "hoge" ) ;
var resultElement = document.getElementById( "result" ) ;

element.addEventListener( "click", function ( event ) {
	console.log( event ) ;
	resultElement.textContent = Number( resultElement.textContent ) + 1 ;
} ) ;
/** try it! **/
</script>
</body>
</html>

capture (キャプチャリングフェイズでの実行)

第3引数に真偽値でtrueを指定するか、またはオブジェクトのcaptureにtrueを指定することで、キャプチャリングフェイズで関数を呼び出せます。イベントフェイズについて、詳しくはEventTargetのチュートリアルで説明しています。

<button id="hoge">実行</button>
element = document.getElementById( "hoge" ) ;

// 真偽値の場合
element.addEventListener( "click", function ( event ) {
	console.log( "イベント発生!!" ) ;
}, true ) ;

// captureの場合
element.addEventListener( "click", function ( event ) {
	console.log( "イベント発生!!" ) ;
}, {
	once: false ,
	capture: true ,
	passive: false ,
} ) ;

element2(青い部分)にはclickイベントで第3引数にtrueを指定しました。そのため、element1(赤い部分)をクリックした時、伝播によるイベントの実行順が青が赤よりも先になってます。第3引数をfalseに変更すると、この順序が入れ替わるのを確認して下さい。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#hoge, div#fuga {
	padding: 15px ;
	min-width: 100px ;
	min-height: 50px ;
	background-color: #f00 ;
}
div#fuga { background-color: #00f ; }
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
	<div id="fuga">
		<div id="hoge"></div>
	</div>
<hr>
<div id="result"></div>
<p><button id="reset">リセット</button></p>
<script>
/** try it! **/
var element1 = document.getElementById( "hoge" ) ;
var element2 = document.getElementById( "fuga" ) ;
var resultElement = document.getElementById( "result" ) ;

element1.addEventListener( "click", function ( event ) {
	resultElement.textContent += "赤→" ;
} ) ;

element2.addEventListener( "click", function ( event ) {
	resultElement.textContent += "青→" ;
}, true ) ;	// 変更してみよう!
/** try it! **/

document.getElementById( "reset" ).onclick = function () {
	resultElement.textContent = "" ;
}
</script>
</body>
</html>

once (1回限りの実行)

第3引数のonceにtrueを指定することで、イベントの発生を1回限りにすることができます。

<button id="hoge">実行</button>
element = document.getElementById( "hoge" ) ;

element.addEventListener( "click", function ( event ) {
	console.log( "イベント発生!!" ) ;
}, {
	once: true ,
	capture: false ,
	passive: false ,
} ) ;

デモです。イベントが1回しか発生しないのを確認して下さい。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#result {
	white-space: pre-wrap ;
}
</style>
</head>
<body>
	<button id="hoge">実行</button>
<hr>
<div id="result">0</div>
<script>
/** try it! **/
var element = document.getElementById( "hoge" ) ;
var resultElement = document.getElementById( "result" ) ;

element.addEventListener( "click", function ( event ) {
	console.log( event ) ;
	resultElement.textContent = Number( resultElement.textContent ) + 1 ;
}, {
	once: true ,	// 変更してみよう!
	capture: false ,
	passive: false ,
} ) ;
/** try it! **/
</script>
</body>
</html>

passive (preventDefault()を無視)

第3引数のpassiveにtrueを指定することで、コールバック関数内でのpreventDefault()が無効になります。

<button id="hoge">実行</button>
element = document.getElementById( "hoge" ) ;

element.addEventListener( "click", function ( event ) {
	event.preventDefault() ;	// passive=trueだと無視される
	console.log( "イベント発生!!" ) ;
}, {
	once: true ,
	capture: false ,
	passive: true ,
} ) ;

デモです。passiveにtrueを指定しているので、コールバック関数内のpreventDefault()が無視されます。そのため、ページ内リンクをクリックしたことにより、移動先までスクロール移動してしまいます。これをfalseにすると、preventDefault()は無視されないので、スクロール移動しません。trueを指定することにより、処理がよりスムーズになる場合があります。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#result { white-space: pre-wrap ; }
body { height: 3000px ; }
</style>
</head>
<body>
	<a href="#heading" id="hoge">実行</a>
	<h2 id="heading">移動先</h2>
<hr>
<div id="result">0</div>
<script>
/** try it! **/
var element = document.getElementById( "hoge" ) ;
var resultElement = document.getElementById( "result" ) ;

element.addEventListener( "click", function ( event ) {
	event.preventDefault() ;
	resultElement.textContent = Number( resultElement.textContent ) + 1 ;
}, {
	once: false ,
	capture: false ,
	passive: true ,	// 変更してみよう!
} ) ;
/** try it! **/
</script>
</body>
</html>

on属性との違い

on属性とaddEventListener()の違いは、上書き登録か追加登録かです。重ねて指定した場合、前者は以前の内容を上書きしますが、後者は追加で登録します。

// elementをクリックすると、1回だけcallbackが実行される
element.onclick = callback ;
element.onclick = callback ;
element.onclick = callback ;
element.onclick = callback ;
element.onclick = callback ;

// elementをクリックすると、5回、callbackが実行される
element.addEventListener( "click", callback ) ;
element.addEventListener( "click", callback ) ;
element.addEventListener( "click", callback ) ;
element.addEventListener( "click", callback ) ;
element.addEventListener( "click", callback ) ;

サポート状況

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
addEventListener() 9+
options object 49+ 49+ 10+×× 36+ 10.0+×
passive 51+ 49+ 10+×× 36+ 10.0+×
once 55+ 50+××× 42+××
capture 49+ 49+ 10+×× 36+ 10.0+×
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月3日 (火)
コンテンツを公開しました。