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）
乗ったマウスが離れた時
２つの違いはバブリング
mousedown
マウスボタンを押した時
mouseup
マウスボタンを離した時
keydown
キーボードを押した時
keypress
キーボードを押している時
submmit
submmitボタンを押した時
selectstart
テキストが選択された時
