menu
menu

キーワード検索

 

前月(11月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 3 - ) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 4 - ) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  6. ( 5 ↓) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  7. ( 9 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  8. ( 8 - ) 【CSS】レスポンシブデザインのブレークポイントは⁉
  9. (10 ↑) 【Mac】iMovieの保存場所を変更する
  10. ( - ↑) 【PHP】PHPでシンプルなメールフォーム
このエントリーをはてなブックマークに追加

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

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

こんにちは(・∀・)

今日は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

voice

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

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


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

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

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

JavaScript

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

love is listen, overlook, voice and lot of

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

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

関数に引数を付けない

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


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

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

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

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

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

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


関連リンク

JavaScript入門
jQuery入門

参考

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

  • addEventListener JavaScript
このエントリーをはてなブックマークに追加