求職者支援訓練Webサイト制作科 4月18日開講クラス 漂泊

初心者がプロになるための勉強 フェリカテクニカルアカデミーWebサイト制作科 4月18日開講クラス授業補足ブログ

DOMイベントリスナー

HTML要素の属性として指定する問題点

  • 1つのイベントに対して複数の関数を設定しようとすると煩雑になる

以下のように、funcA、funcBを順に実行することで対処するしかありません。

<button onclick="funcA(); funcB();">ボタン</button>

DOMイベントリスナー

  • 1つのイベントに複数の関数を指定できる
  • 「DOM Level2 イベント」という仕様で定義
  • JavaScriptのコードから、HTML要素を参照し、その要素に対してイベントと関数を結びつけることができる


《ページが読み込まれたときにイベントを実行》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMイベントリスナー</title>
</head>
<body>
<h1>読み込まれたときのイベントの例</h1>
<script>
function init() {
	alert('OK');
}

// 最初に実行する関数を設定する
window.addEventListener('load', init, false);
</script>
</body>
</html>
イベント関数を設定する

いままでは、HTML要素にイベント処理をする関数を書いてきました。

<body onload="関数名">

DOMイベントリスナーでは、イベント処理をする関数のことを「イベントリスナー(EventListener:イベントに聞き耳を立てているという関数)」と言います。

addEventListenerメソッド
  • HTMLの要素とイベントリスナーを結びつけるには、addEventListenerメソッドを使います
  • 最後に指定する「falseまたはtrue」の引数は、イベントをどの時点で実行するかを指定する値です
  • ほとんどの場合は「false」を指定します
  • イメント名は、頭に「on」を付けません

DOMオブジェクト .addEventListener( 'イベント名'、実行したい関数名, falseまたはtrue );

以下のように記述します。

window.addEventListener('load', 関数名, false);

関数名は

function ini() {
  alert('OK');
}
無名関数
  • 関数名を省略した記法
<script>
  window.addEventListener('load',
  function() {
    alert("OK");
  }
  ,false);
</script>
DOMContentLoadedイベント
  • loadイベントは、HTMLの読み込みが終わり、ユーザーに表示する直前に発生するイベントです
  • それよりも前に、DOMツリーの準備ができた時点で発生するイベントが「DOMContentLoaded」イベントです
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMイベントリスナー</title>
</head>
<body>
<h1>読み込まれたときのイベントの例</h1>
<script>
  window.addEventListener('DOMContentLoaded',
  function() {
    alert("OK");
  }
  ,false);
</script>
</body>
</html>

求職者支援訓練 フェリカテクニカルアカデミー