調べごとをしていたらaddEventListener()を使っているコードを見かけ、便利そうだったので使ってみたいなと思い調べてみました。
addEventListener()とは
addEventListener()メソッドは、ボタンをクリックした時のように指定された要素に対しイベントハンドラ(動作による操作)を追加することができます。
構文
element.addEventListener(イベント, 関数, useCapture)
‘イベント’にはclick、changeなどのイベントが入ります。
‘関数’には実行したい関数を書きます。
‘useCapture’はオプションで省略可能です。
boolean型を入力可能でfalseがデフォルト値で入っています。
trueにするとイベントをキャプチャフェーズで実行し、falseにするとバブリングフェーズで実行します。
簡易サンプル
document.addEventListener(‘DOMContentLoaded’,func(),false);
document.addEventListener(“DOMContentLoaded”, function(){
// code
}, false);
よく使うHTML DOM イベント
HTML DOMイベントはいっぱい種類があるので、よく使うものをまとめます。
| イベント名 | 内容 | 所属 |
|---|---|---|
| DOMContentLoaded | 最初の HTML 文書の読み込みと解析が完了したとき、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します。 ※ 似たイベントに load がありますがloadは画像など全て読み込まれてから発生します。 | イベント |
| change | input, select, textarea 要素において、ユーザーによる要素の値の変更が確定したときに発生します。 | イベント |
| click | ユーザーが要素に対しクリックした時に発生します。 ※ onclickではないことに注意 | マウスイベント |
| dblclick | ユーザーが要素に対しダブルクリックした時に発生します。 | マウスイベント |
| keyup | ユーザーがキーボードのキーを離した時に発生します。 | キーボードイベント |
| keydown | ユーザーがキーボードのキーを押した時に発生します。 | キーボードイベント |
addEventListener()サンプルコード
addEventListener()を使ってどんなことができるのか、イメージしやすいようにサンプルコードを作成しました。
クリックした時 (click)
inputタグがクリックされた時にイベントリスナーを追加しています。
See the Pen addEventListener test1 by Nakamoto (@programmerlife) on CodePen.
Javascript
document.querySelector(‘input’).addEventListener(“click”, function(){
alert(“Thank you”);
}, false);
要素はquerySelectorで取得しています。
変わった時 (change)
selectタグが切り替わったタイミングで処理が実行されます。
See the Pen addEventListener test ( change ) by Nakamoto (@programmerlife) on CodePen.
Javascript
document.querySelector(“#sel”).addEventListener( “change”, function () {
alert(“changed”);
} );
第三引数を省略しても問題なく動きます。
読み込まれた時 (DOMContentLoaded)
window.onloadやjQueryなら$(function(){})の代わりとして使われるようです。
See the Pen addEventListener test (DOMContentLoaded) by Nakamoto (@programmerlife) on CodePen.
Javascript
読み込まれた際にtestメソッドを実行し既出のclickとchangedを動作するように処理を加えています。
function test() {
document.querySelector(“input”).onclick = btnClick;
document.querySelector(“#sel”).onchange = selChange;
}
function btnClick() {
alert(“clicked”);
}
function selChange() {
alert(“changed”);
}
document.addEventListener(“DOMContentLoaded”, test, false);
第二引数のメソッドは引数がない場合は () を省略できます。.onchange = selChange;の場合も()省略可能です。
※ DOMContentLoadedは例えば複数ボタンにそれぞれ別々の処理をaddEventListenerでクリックした際に発生させたい場合、1つずつaddEventListenerを追加せずに書くことができます。
おわり
addEventListenerを使うとなんかコードがかっこよく見えますよね。
調べごとをしていた時にdocument.addEventListener(“DOMContentLoaded”, test, false);のような処理を見かけて、addEventListenerが何しているかがわからなかったのでなぜこのボタンの処理は動くんだろうと頭を抱えることとなりました。これでもうaddEventListenerで頭を抱えなくてすみそうです。
参考
w3schools.com HTML DOM addEventListener() Method
w3schools.com HTML DOM Events
