Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

[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.

これまでのページ

zwirky
a-hikkoshi
当社は、親会社である株式会社エイチームの経営理念をそのままに、引越しの比較サービス開始以降、大切にしてきた「三方よし」の理念を基本として、世の中に求められるサービスの創造を目指します。 一緒に働けるエンジニアを募集しております。下記URLよりご応募ください。 https://bit.ly/3lwf7QJ
https://hikkoshi.a-tm.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away