【JavaScript】addEventListenerの基本的な書き方 その3

こんにちは（・∀・）

今日はJavaScriptの「addEventListener」の基本的な記述方法 その3です。

前回の投稿【JavaScript】addEventListenerの基本的な書き方 その2と前々回の投稿【JavaScript】addEventListenerの基本的な書き方でaddEventListenerの基本的な記述方法についてご紹介しました。

今日もその続きになります。

イベントリスナー作動条件

イベントリスナーの使用パターンです。

DOM構築後に処理を開始

DOM(htmlタグ)が読み込まれたら動作を開始します。

document.addEventListener('DOMContentLoaded', hoge, false);

「DOMContentLoaded」はイベントターゲット「document」にセットします。

サンプルではページが読み込まれたら「listen」の文字が表示されます。

JavaScript

var s1 = document.getElementById('sample1');
document.addEventListener('DOMContentLoaded', function(){
s1.innerHTML = 'listen';
}, false);

Result

ページ全体が読み込まれたら処理を開始

画像や他のスクリプト等、ページ全体が完全に読み込まれたら動作を開始。

window.addEventListener('load', hoge, false);

「load」はイベントターゲット「window」にセットします。

サンプルではページ全体が読み込まれたら「overlook」の文字が表示されます。

JavaScript

var s2 = document.getElementById('sample2');
window.addEventListener('load', function(){
s2.innerHTML = 'overlook';
}, false);

Result

ちなみにイベントターゲットは「element」、「document」、「window」の3つが基本となります。他にもイベントターゲットになるオブジェクトはありますが、ここでは省略します。

要素がクリックされたら処理を開始

要素がクリックされたら動作を開始します。

document.addEventListener('click', hoge, false);

「click」はイベントターゲット「document」にセットします。

サンプルのボタンをクリックするとボタンの文字が「voice」から「love」に変わります。

JavaScript

var s3 = document.getElementById('sample3');
s3.addEventListener('click', function(){
s3.innerHTML = 'l.o.v.e.';
}, false);

Result

スクロールしたら処理を開始

画面をスクロールしたら処理を開始します。

window.addEventListener('scroll', hoge, false);

「scroll」はイベントターゲット「window」にセットします。

画面をスクロールすると「effort」の文字がたくさん?表示されます。

JavaScript

var s4 = document.getElementById('sample4');
window.addEventListener('scroll', function(){
s4.insertAdjacentHTML('beforeend', ' effort');
}, false);

Result

イベントリスナーを使用する上での注意点

イベントリスナーを使用するときの注意点です。

関数に引数を付けない

関数に引数を付けると動作しない場合があります。

obj.addEventListener('click', hoge(evt), false);　×

obj.addEventListener('click', hoge(), false);　×

obj.addEventListener('click', hoge, false);　○

以上addEventListenerの基本的な書き方 その3でした。

ちなみに、各サンプルのコードとサンプルデモのコードでは書き方が違うのわかりました⁉️

サンプルデモは無名関数でイベント登録してます。

関連リンク

JavaScript入門
jQuery入門

参考

[Javascript] イベントリスナーいろいろ