JavaScript - なぜイベントハンドラが重要なのか：mx-Lab：SSブログ

	ブログをはじめるログイン

ブラウザごとのイベント発生要素取得の違い..｜JavaScript のクラスの作成 -.. ブログトップ

JavaScript - なぜイベントハンドラが重要なのか　[JavaScript] [編集]

◆JavaScript - なぜイベントハンドラが重要なのか

このブログ、JavaScript に関して、他のことより真っ先に、イベントハンドラ（イベントリスナー）の解説から始めました。

これは俺の独断と偏見ですが、JavaScript においては、クラスの定義やプロトタイプよりも、イベントハンドラ（イベントリスナー）のほうが、よっぽど重要だと思っています。

今回は、その理由についてお話します。

◆高度なテクニックを知らなくても、JavaScript は書ける！

クラス定義なんぞ知らなくても、JavaScript は書けます。

そのトリガーは、通常はイベントハンドラ（イベントリスナー）です。

それだけに、基礎的な文法をおさえてあれば、イベントハンドラ（イベントリスナー）の知識だけでも、JavaScript の処理は実装できます。

知識よりも、起動するトリガーに対する、きちんとした「さばき方」を習得することの方が、優先すべき事項だと思います。

◆タイミング依存にならない！

JavaScript は、書き方によっては、ブラウザで window や body のロードが終わっていないのに、ロードが終わっていないインスタンスに対してアクセスするコードが書けてしまいます。

こういうコードを書いてしまうと、当然対象となるインスタンスが解決できないので、実行に失敗します。

他のインスタンスにアクセスするコードを書く場合、お互いの準備ができていることが、なによりも大事です。

ここで、スクリプトを起動できるタイミングをしっかり捕まえることができる仕組みが、イベントハンドラ（イベントリスナー）です。

この仕組みを使うことによって、安全性と確実性の向上が見込めます。

◆分散開発や保守性の向上につながる！

世間では、<body onload="hoge();"> などという書き方が、まだ散見されます。

こういう仕組みを使おうとすると、HTML 側は、JavaScript の関数名を知らなくちゃいけなくなります。

これは、HTML と JavaScript の「密結合（みつけつごう）」を示しています。

「密結合」が、開発と保守性の妨げになることは、いまやプログラミングの常識です。

JavaScript は、HTML の外部ファイルに逃がすことができます。

イベントを捕まえることができれば、極端な話、こんなコードを書くこともできます。

index.html（HTML ファイル）
<html>
<head>
    
    <script type="text/javascript" src="Scripts.js"></script>
</head>
<body>
    
</body>
</html>

Scripts.js（HTML が読み込む外部 JavaScript ファイル）

    ･･････

// ウィンドウロード時の処理
function onWindowLoad() {
    window.removeEventListener('load', onWindowLoad, true);
    window.addEventListener('unload', onWindowUnload, true);
    // ToDo: ウィンドウの初期化処理を書く
}

// ウィンドウアンロード時の処理
function onWindowUnoad() {
    window.removeEventListener('unload', onWindowUnload, true);
    // ToDo: ウィンドウの後始末処理を書く
}

// 唯一の初期化
window.addEventListener('load', onWindowLoad, true);