JavaScriptのイベントドリブンモデル(イベント駆動モデル)

2020 1/16

2019.12.15 2020.01.16

はじめに

JavaScriptのイベントドリブンモデル(イベント駆動モデル)についてまとめてみました。

イベントドリブンモデルとは

ブラウザ上では頻繁に、
クリックした/何かの上にカーソルが乗った/何かが入力された
など様々なイベントが発生します。
そのイベントに応じてプログラムを実行するコードを書くスタイルをイベントドリブンモデル(イベント駆動モデル)と呼びます。

クライアントサイドJavaScriptにおけるイベントの流れ

①どの要素
②どんなイベント
③イベントハンドラー/イベントリスナーに紐付け、予約しておく
という流れをとります。

重要なことは、あくまで
イベントが実行された時のために定義しているだけ。
実行するのはブラウザです！！

要素を取得

ちょっと長くなってしまったので、こちらの記事を参照してください！

JavaScriptの要素を取得する方法
https://hirocorpblog.com/javascript%e3%81%ae%e8%a6%81%e7%b4%a0%e3%82%92%e5%8f%96%e5%be%97%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95%e4%b8%80%e8%a6%a7/

イベントの種類

JavaScriptで使えるイベント一覧
https://hirocorpblog.com/post-351/

イベントハンドラー/イベントリスナーの違い

端的な言い方をすると

イベントリスナーが新しい記法(個人的にはこっち推奨)
イベントハンドラーが古い記法

イベントハンドラーは「同一の要素やイベントに対して複数のイベントハンドラーを紐付けできない。」という問題があります。
しかし、イベントリスナーはその制約がないので使いやすいです。
まぁでもイベントハンドラーも手軽な点が魅力で使うケースもそこそこあるので覚えておきましょう。

イベントハンドラー

イベントハンドラーの記法は下記の2つです
①要素オブジェクトのプロパティとして宣言する。
②タグ内の属性として宣言する。

①要素オブジェクトのプロパティとして宣言

// 抽象的な書き方
//その１
object名.onイベント名 = function(){
    処理する内容
};

//ようはイベントハンドラーに関数オブジェクトが渡せればOK！！
object名.onイベント名 = 関数オブジェクト

具体的な例として
html

 <input id="btn" type="button" value="テスト用">

sample.js

// ページが描画された時に実行されるイベントハンドラー
//その1で記述
window.onload = function(){
    // ボタンがクリックされた時に実行されるイベントハンドラー
    //その2で記述
    document.getElementById('btn').onclick = btn_alert;

    //名前付き関数リテラル
    var btn_alert = function(){
        window.alert("ボタンがクリックされた。");
    }
}

window.onloadも結構使います。

タグ内の属性として宣言

ちょっとした記述で試したいときはいいけれど、コードが醜くなるので完全に非推奨です。
(ページ構成とスクリプトは明確にファイルを分けて書くべしというトレンドがあって、将来変わらなさそう。)

//抽象的な書き方
<タグ名 onイベント名="JavaScriptのコード">

具体的な例として

 <input id="btn" type="button" value="テスト用" onclick="window.alert("ボタンがクリックされた。");">

イベントリスナー

お待たせしました。イベントリスナーです。
こちらはaddEventListenerメソッドを使います。

//抽象的な書き方
要素オブジェクト.addEventListner(
イベントの種類, 実行すべき処理, イベントを実行するタイミング
);

具体的な例として
html

 <input id="btn" type="button" value="テスト用">

sample.js

//ページが描写された時に実行する
document.addEventListner('DOMContentLoaded', function(){

//名前付き関数リテラルを定義する。
    var btn_click = function(){
        window.alert("ボタンがクリックされた。");
    }

// イベントリスナーの処理に名前付き関数リテラルの呼び出しを定義。
    document.getElementById('btn').addEventListner('click', btn_click, false);
}, false);

こちらも処理そのものを渡せればいいので、関数オブジェクトを渡しても大丈夫です！