初心者コーダーのための
HTML/CSS JavaScript PHP WordPress
難しい言葉や概念より、実践重視の入門ブログ
JavaScript

【JavaScript】Webサイトでイベントを発生させる【addEventListener】

【JavaScript】イベント addEventListener

addEventListener、これはJavaScriptを扱うコーダーとしての第一歩となります!
クリックやテキストの入力など、さまざまなアクションに応じてイベントを発生させるものです。

「くぅー!なんか俺すげーできるやつっぽい!」
そんな錯覚に伴いモチベーションを爆上げしてくれる素敵なやつです。

今回はそんな素敵なaddEventListenerさんについて学んでいきます。

サンプルコードの使い方

コード右上のアイコンをクリックすることでコピーできます。
全てのサンプルコードは、空のhtmlファイルにコピペするだけで結果を確認することができます。

それでは本文へ、レッツゴー!

基本構文

そして構文がこちら!

トリガー要素.addEventListener('アクション', function(){
    実行するイベント;
});

「トリガー要素」を「アクション」することで「イベント」が実行されます。
早速見ていきましょう。

サンプルコード

「ボタン」を「クリック」することで「文字色が変わる」イベントのサンプルコードです。

<p class="sample_text">このテキストの文字色が変わります。</p>
<button class="sample_button">ボタン</button>

<style>
    .sample_text.on{color: red;}
</style>

<script>

    // 要素の取得
    sampleText = document.querySelector('.sample_text');
    sampleButton = document.querySelector('.sample_button');

    // 「sampleButton」を「クリック」することでイベント実行
    sampleButton.addEventListener('click', function(){
        // イベント内容
        sampleText.classList.toggle('on');
    });

</script>

ボタンを「sampleButton」、テキストを「sampleText」として要素を取得をしているのですが、要素の取得については別の記事で紹介するので一旦忘れましょう。

要素の取得についてはこちら

    sampleButton.addEventListener('click', function(){
        sampleText.classList.toggle('on');
    });

ボタン(トリガー要素)をclick(アクション)することでsampleText.classList.toggle(‘on’);(色が変わるイベント)が発生しています。

sampleText.classList.toggle(‘on’);について、
これは「テキストに.onというクラスをつけたり外したりする」という記述です。
この記述についても、別記事で紹介します。

【JavaScript】クラスやスタイル属性の付与と削除【classList、style】

addEventListenerの第一引数と第二引数

さて、改めてaddEventListenerの基本構文を見てみましょう。

トリガー要素.addEventListener('アクション', function(){
    実行するイベント;
});

addEventListenerの、
第一引数には、イベントを発火させるためのアクション
第二引数には、発火するイベントが記述された関数
が入ります。

引数とは()の中に入るもののことを指しています。
今回の場合

トリガー要素.addEventListener(第一引数, 第二引数);

となっています。

第二引数は、関数が入っていれば何でもOKなのですが、第一引数には指定されたアクションのみが対応しています。

一体どのようなアクションが入るのか、見ていきましょう。

addEventListenerで使えるアクション一覧

僕自身が現場でよく使っているアクションは主に、

  • click
  • scroll
  • load
  • keyup
  • resize
  • change

です。

click

トリガー要素をクリックすることでイベントが発火します。

scroll

トリガー要素をスクロールすることでイベントが発火します。
そのため、トリガー要素は主にウィンドウ(window)そのものになります。

  • スクロールで発火するアニメーション
  • スティッキーヘッダー
  • ページトップボタンなど

DOMContentLoaded、load

DOMContentLoaded:DOMツリーを作成し終わったらイベント発火
load:その後さらに画像やスタイルシートなど、全て読み込んだ後イベント発火

絶妙にタイミングが違うのですが、簡単に言うとページの読み込みが完了したら発火します。
とりえあずloadだけ抑えとけばOKです。
一応書きましたが、しばらくはDOMContentLoadedのことは忘れてOKです。

  • ロード画面

kekeyup

何かしらキーボードのキーを押して、そのキーを離した瞬間に発火します。

  • フォーム関連の入力値チェックなど

resize

ウィンドウ幅が変わった時に発火します。

  • レスポンシブ対応させる時など

change

フォームに何かしらの変更があった時に発火します。

  • チェックボックスやラジオのチェック有無によってメッセージを表示させる時など

その他

これ以降もアクション一覧なのですが、僕は現場でそんなに使わないのでササっと紹介します。
ふーんくらいの感じで流し見でOK
むしろ必要な時に調べればいいので、見なくてすらOK

dblclick

ダブルクリックした時

mousemove

マウスが移動した時

mouseover(mouseenter)

マウスが乗った時

2つの違いはバブリング

mouseout(mouseleave)

乗ったマウスが離れた時

2つの違いはバブリング

mousedown

マウスボタンを押した時

mouseup

マウスボタンを離した時

keydown

キーボードを押した時

keypress

キーボードを押している時

submmit

submmitボタンを押した時

selectstart

テキストが選択された時