[JS初心者]#1 イベント編 JavaScriptを学ぶ

イベントドリブン

イベントに対応して処理が実行される形態のことをイベントドリブンという。

イベントについて

◯◯が押された、◯◯の内容が変更されたなど、ブラウザ上で起こる動作のこと。

イベントハンドラについて

イベントに対して実行される処理のこと。

<input type="button" id="button1" value="ボタン1">
<script type="text/javascript">
window.onload = function() {
  var button1 = document.getElementById('button1');
  button1.onclick = function() { // これがイベントハンドラ
    alert('Clicked');
  }
};
</script>

イベントハンドラは1つのイベントに複数定義することはできない。

<input type="button" id="button1" value="ボタン1">
<script type="text/javascript">
window.onload = function() {
  var button1 = document.getElementById('button1');
  button1.onclick = function() {
    alert('Clicked1');
  }
  button1.onclick = function() {
    alert('Clicked2');
  }
};
</script>

この実行例だとonclickイベントは上書きされて、alertではClicked2が表示されてしまう。。
これではイベントに複数の定義を設定できない。

イベントリスナについて

イベントリスナはイベントハンドラと同様にイベントに対して実行される処理のこと。
大事なのは、イベントハンドラとは違い、複数の定義をイベントに設定することができる。

<input type="button" id="button1" value="ボタン1" />
<script type="text/javascript">
window.onload = function() {
  var button1 = document.getElementById('button1');
  var func1 = function() {
    alert('Clicked1');
  }
  var func2 = function() {
    alert('Clicked2');
  };
  button1.addEventListener('click', func1, false);
  button1.addEventListener('click', func2, false);
};
</script>

こうすることで、button1に複数の定義を設定することができ、Clicked1とClicked2の両方がでてくるようになる。

イベント

イベントで扱われるオブジェクト一覧

ウィンドウオブジェクト
フォームイベント
キーボードイベント
マウスイベント
タッチイベント

ウィンドウイベント

ブラウザについてのイベントのことで、例えばページの遷移やブラウザのボタンを押したときに呼ばれるイベントのことです。

イベント名	意味
onafterprint	印刷直後
onbeforeprint	印刷直前
onbeforeunload	Webページ遷移直前
onblur	フォーカスが外れた
onerror	JavaScriptエラーが発生
onfocus	フォーカスされた
onhashchange	URLのハッシュが変更
onload	Webページの読み込み完了（キャッシュは対象外）
onmessage	メッセージを受信
onoffline	ネットワーク環境がオンラインからオフラインに変更
ononline	ネットワーク環境がオフラインからオンラインに変更
onpagehide	他のページへの遷移などで元のページが隠された
onpageshow	Webページ読み込み完了（キャッシュも対象）
onpopstate	戻る・進むボタンでURL履歴から履歴が取り出された
onredo	やり直すボタンが押された
onresize	ウィンドウのサイズが変更された
onstorage	ローカルストレージもしくはセッションストレージが変更された
onundo	やり直すボタンが押された
onunload	他のページに移動した

フォームイベント

ブラウザ上にあるフォームの状態が変化したときに発生するイベントのことです。

イベント名	意味
onblur	フォーカスが外れた
onchange	変更された
onfocus	フォーカスされた
onformchange	フォームの値が変更された
onforminput	フォームの値が入力された
oninput	テキスト要素に入力された
oninvalid	要素の無効な値が入力された
onselect	要素が選択された
onsubmit	送信ボタンが押された

キーボードイベント

キーボードの状態が変化した場合に発生するイベントのことです。

イベント名	意味
onkeydown	キーが押された
onkeypress	キーが押されて離された
onkeyup	キーが離された

マウスイベント

マウスの状態が変化した場合に発生するイベントのことです。

イベント名	意味
onclick	ボタンがクリックされた
oncontextmenu	マウスの右ボタンが押された
ondblclick	ボタンがダブルクリックされた
ondrag	ドラッグされた
ondragend	ドラッグが終わった
ondragenter	ドロップ目標にドラッグされた
ondragleave	ドロップ目標からドラッグが外れた
ondragover	ドロップ目標上にドラッグされている
ondragstart	ドラッグ開始された
ondrop	ドロップ目標にドラッグがドロップされた
onmousedown	ボタンが押された
onmousemove	マウスポインタが移動された
onmouseout	マウスポインタが要素から外れた
onmouseover	マウスポインタが要素上に入った
onmouseup	ボタンを話した
onmousewheel	マウスホイールを回転させた
onscroll	スクロールバーを操作した

タッチイベント

タッチパネルの状態が変化した場合に発生するイベントのことです。

イベント名	意味
touchstart	指が置かれた
touchmove	指がドラッグされた
touchend	指が話された

イベントリスナ

要素に対してイベントをリスナを設定できるようになる。
要素に定義されているメソッド一覧が下記になります。

イベント名	意味
addEventListener()	イベントリスナを登録
removeEventListener()	イベントリスナの削除
dispatchEvent()	任意にイベントを発行

※ IE対応をするためには下記を参照

// イベントリスナの登録
// IE8以下の場合
要素.attachEvent(イベント名, イベントリスナ)
// IE9以上、IE以外
要素.addEventListener(イベント名, イベントリスナ, イベントの伝達の方向)

// イベントリスナの削除
// IE8以下の場合
要素.detachEvent(イベント名, イベントリスナ)
// IE9以上、IE以外
要素.removeEventListener(イベント名, イベントリスナ, イベントの伝達の方向)

イベントの伝達の方向とはなにか？

例えば、下記のような要素があれば、

<div id='div1'>
 click1
 <div id='div2-1'>
  click2-1
 </div>
 <div id='div2-2'>
  click2-2
 </div>
</div>

イベントリスナをidそれぞれに設定した場合、click1をクリックすると、イベントはclick1だけした発生しないが、click2-1をクリックすると、click1とclick2-1の両方のイベントが発生することになる。
このことを、イベントバブリングと言います。

▼ まとまっていてわかりやすいです。
JavaScriptのイベントバブリングという仕様について本気出して考えてみた!!｜By U Zensen.

これまでのページ