求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

イベントとイベントハンドラ

イベントとは

f:id:web-0220:20190313062550g:plain

developer.mozilla.org

  • ブラウザー上でユーザーが行う様々な動作のこと
    • マウスをクリック
    • マウスをダブルクリック
    • マウスのポインターの移動
    • マウスのボタンを押す
    • マウスのボタンを放す

など

イベントハンドラ (event handler)とは

  • イベントの発生をきっかけにして、何らかの処理を実行することができる
イベントハンドラの使い方

イベントとイベントハンドラを関連づける

  1. 開始タグの中の属性を使って行う
  2. プロパティを使って関連づける
開始タグの中で関連づける

<要素名 onイベント名 = 'イベントハンドラ'>・・・</要素名>

<button onclick="console.log('イベント発生')">
プロパティを使って関連づける

オブジェクト名.onイベント名 = function() {
 イベントハンドラ
};

<body>
<button id="btn">クリックしてください</button>
<script>
var element = document.getElementById('btn');
element.onclick = function() {
  console.log('イベント発生');
};
</script>
</body>
loadイベントとは
  • 関連づけられた要素を読み終わったときに発生するイベント
  • ページの読みが終わったときに、発生するイベントをよく利用する
  • ページの読みが終わったときに、なんらかの処理を実行したいときに便利

body要素のloadイベントにイベントハンドラを設定

window.onload = function() { イベントハンドラ }

 ※body要素に設定するときは、「window」オブジェクトの記述は、必須

<body>
<script>
window.onload = function() {
  console.log('loadイベント発生!');
};
</script>
</body>

その他の要素のloadイベントにイベントハンドラを設定

要素オブジェクト名.onload = function() { イベントハンドラ }

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

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

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

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

DOMイベントリスナー

  • 1つのイベントに複数の関数を指定できる
  • 「DOM Level2 イベント」という仕様で定義
  • DOMイベントリスナーを使った方法では、onclick="関数名"などのようにHTMLの要素として、実行したい関数を結びつけるのではなく、JavaScriptのコードからHTML要素を参照し、その要素に対してイベントと関数を結びつける操作をします
  • DOMイベントリスナーでは、ひとつの要素に複数のイベントと関数を結び付けることもでき、あとで結びつけを解除したり、追加したりすることもできる


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

<!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>
<script>
function init() {
  alert('OK');
}

// 最初に実行する関数を設定する
window.addEventListener('load',
  function() {
    alert('OK');
  }
  ,false);
</script>
addEventListenerメソッド
  • DOMイベントリスナーでは、イベント処理をする関数のことを「イベントリスナー(EventListener:イベントに聞き耳を立てているという関数)」と言います
  • HTMLの要素とイベントリスナーを結びつけるには、addEventListenerメソッドを使います
  • 1つの要素や1つのイベントに対して、複数のイベントハンドラを設定できます
  • 最後に指定する「falseまたはtrue」の引数は、イベントをどの時点で実行するかを指定する値です
  • ほとんどの場合は「false」を指定します
  • イメント名は、頭に「on」を付けません

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

<body>
<button id="btn">クリック</button>
<script>
function btnclick() {
  alert('クリックされました');
}
window.addEventListener('load',
function() {
  var btn = document.getElementById('btn');
  btn.addEventListener('click', btnclick, false);
},
  false);
</script>
</body>
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>