addEventListener
イベントの登録をaddEventListener()を使って行うことができます。
基本構文は次のようになります。
対象の要素.addEventListener(イベントタイプ, 関数, イベントの伝播の判断(論理値))
対象の要素は、画面上のDOMを指定します。(通常はDOMに記述したidやclassです)
第一引数はイベントタイプを指定します。
イベントタイプは以下のものがあります。
load DOMContentLoaded click mousedown mouseup mousemove keydown keyup keypress change submmit scroll
第二引数はイベントが発生した時に実行する関数を書きます。
第三引数は論理値なのでtrueかfalseを指定します。
デフォルトはfalseですが、明示的にfalseを書きます。
まずは簡単な例を試してみます。
下記のHTMLを用意しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1">テスト</div>
<script type="text/javascript">
let element_test = document.getElementById('test1');
// addEventListenerの使用
addEventListener(element_test, testclick, false);
function testclick() {
alert('on !');
}
</script>
</body>
</html>
上記の書き方は第二引数の関数を別途記載した関数名にしていますが、
第二引数の関数を無名関数にしてaddEventListenerの構文の中に記載する方法もあります。
具体的に次のhtmlを用意しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1">テスト</div>
<script type="text/javascript">
let element_test = document.getElementById('test1');
// addEventListenerの使用(その2)
element_test.addEventListener('click', function() {
// 無名関数として定義、処理
alert('on !');
}, false);
</script>
</body>
</html>
画面上の「テスト」の文字列をクリックすると、最初のサンプルと同様の動きをしてアラートが表示されます。
また、ES2015の書き方としてアロー関数を使う方法もあります。
基本的には無名関数の書き方と似ていますが、関数を呼び出す箇所の書き方がアロー関数の書き方に変わります。
具体的に次のサンプルを書いて試してみました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1">テスト</div>
<script type="text/javascript">
let element_test = document.getElementById('test1');
// addEventListenerの使用(その3)
element_test.addEventListener('click', () => {
// アロー関数として定義、処理
alert('on !');
}, false);
</script>
</body>
</html>
アロー関数を使って書いた場合でも同じ動きをすることがわかります。
addEventListenerの重複登録について
addEventListenerの書き方と動作については上記の通りですが、
イベントを2重に登録する場合は、または一つの要素に複数の処理(関数)をつけたい場合は、
意図した動きと違う結果になるので、注意が必要です。
実際にaddEventListenerを2重に登録すると、どのような動きになるのか試してみます。
上記の例の1番目の登録方法で2重にイベントを登録してみます。
下記のサンプルを用意しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1">テスト</div>
<script type="text/javascript">
let element_test = document.getElementById('test1');
// addEventListenerの使用
element_test.addEventListener('click', testclick, false);
// 2重に登録する
element_test.addEventListener('click', testclick, false);
function testclick() {
alert('on !');
}
</script>
</body>
</html>
要素「element_test」に対して、関数「testclick」を2回登録しています。
実際のサンプルはサーバ上のHTMLはこちら(test4.html)です。
実際に動かしてみるとわかりますが、画面上の「テスト」の文字列をクリックしても
1回のアラートしか表示されません。
では次に、同じサンプルを改造して、2回目に登録する関数名を変えて別名の関数を書いてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1">テスト</div>
<script type="text/javascript">
let element_test = document.getElementById('test1');
// addEventListenerの使用
element_test.addEventListener('click', testclick, false);
// 2重に登録する
element_test.addEventListener('click', testclick_sub, false);
function testclick() {
alert('on !');
}
function testclick_sub() {
alert('on sub !');
}
</script>
</body>
</html>
実際のサンプルはサーバ上のHTMLはこちら(test5.html)です。
この画面の「テスト」をクリックすると、2つアラートが起動することがわかります。
それでは、上記のサンプル4とサンプル5を、無名関数で書いてみます。
サンプル6として次のHTMLを用意しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1">テスト</div>
<script type="text/javascript">
let element_test = document.getElementById('test1');
// addEventListenerの使用(その2)
element_test.addEventListener('click', function() {
// 無名関数として定義、処理
alert('on !');
}, false);
// addEventListenerの使用(その2) 重複登録
element_test.addEventListener('click', function() {
// 無名関数として定義、処理
alert('on 2 !');
}, false);
</script>
</body>
</html>
実際のサンプルはサーバ上のHTMLはこちら(test6.html)です。
このサンプル6のテストをクリックすると、無名関数で登録した関数が2回呼び出されることがわかります。
以上のことをまとめると、addEventListenerは、
・同じ要素に、addEventListenerで同じ関数を重複登録しても、1つの処理(関数)のみ動作する
・同じ要素に、addEventListenerで違う関数を重複登録すると、2つの処理(関数)が動作する
・同じ要素に、無名関数で同一の処理を割り当ててると、2つの処理(関数)が動作する
ということが言えます。