JavaScriptのイベントリスナーとloadイベントについて【ウェブデザイン技能検定 1級学科範囲】

addEventListenerメソッドは、指定されたイベントが対象要素に発生したときに呼び出される関数（イベントリスナー）を設定するために使用されます。
画像の読み込みが完了したときに関数を呼び出す場合、loadイベントが適切です。

jQueryに頼りすぎて案外JavaScriptを忘れてしまっているといった方や、ウェブデザイン技能検定を目指している方も学科の範囲に入っていたりしますので、是非この機会に見直していただけたらと思います。

JavaScriptコードの解説

次のコードは、画像の読み込みが完了した後に関数 imageLoaded を呼び出す例です。

let image = document.createElement('img');
image.src = 'path/to/image.jpg';

image.addEventListener('load', imageLoaded);

function imageLoaded() {
    console.log('Image has been loaded.');
}

このコードでは、画像の src 属性に画像ファイルのパスを設定しています。画像が完全に読み込まれると、load イベントが発生し、imageLoaded 関数が呼び出されます。

loadイベントの詳細

• loadイベント:
  • 画像やスクリプト、スタイルシートなどの外部リソースの読み込みが完了したときに発生します。
  • ページ全体の読み込みが完了した際に window オブジェクトでも発生します。

イベントリスナーに関する知識を深めるためのポイント

• イベントの種類:
  • JavaScriptには多くのイベントがあります。例えば、click、keydown、mouseover など、ユーザーのアクションや要素の状態に応じて発生するイベントがあります。
  • 画像読み込みに関しては、load イベントを使用するのが適切です。
• イベントリスナーの設定:
  • addEventListener メソッドを使用して、イベントリスナーを設定します。このメソッドは、次の3つの引数を取ります：
    1. イベントの種類（例：load）
    2. 呼び出す関数（例：imageLoaded）
    3. オプションのオブジェクト（キャプチャリングやパッシブリスナーの設定など）
• イベントバブリングとキャプチャリング:
  • イベントは、バブリングフェーズとキャプチャリングフェーズのいずれかで発生します。バブリングはイベントが子要素から親要素へ伝播することを意味し、キャプチャリングはその逆です。
  • デフォルトでは、addEventListener メソッドはバブリングフェーズでイベントをリッスンしますが、オプションでキャプチャリングフェーズに設定することもできます。

イベントリスナーの基本的な使用例

// 要素の取得
let button = document.getElementById('myButton');

// クリックイベントリスナーの追加
button.addEventListener('click', function() {
    alert('Button was clicked!');
});

// キーボードイベントリスナーの追加
document.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        console.log('Enter key was pressed');
    }
});

まとめ

load イベントは画像やその他の外部リソースが完全に読み込まれたときに使用されます。
イベントリスナーを使用してイベントが発生したときに特定の関数を実行することができます。
JavaScriptのイベント処理を理解することでインタラクティブで反応の良いウェブアプリケーションを構築するための基礎を築くことができます。

個人的にはjQueryを知っていてJavaScriptに活かせる機会に対してJavaScriptを知っていてjQueryに活きることの方がはるかに多いと感じていますので、抵抗がある方なども是非学んでいただけたらと思います。

参考リンク:

• MDN Web Docs - load イベント