かんろぐ Written by kan

【JavaScript】addEventListenerの種類一覧・使い方を紹介

CODE JavaScript

人気記事【無料サポート付】サーバー開設からWordPressの始め方をサポート


addEventListenerの使い方を知りたい人

「addEventListenerの使い方・種類一覧を知りたい。たくさんあるし覚えられないのでまとめたものがあると嬉しいなぁ」

今回はJavaScriptのaddEventListenerについて紹介します。
イベント要素でどれにするかで発火させる方法が変わるので、使い方や種類一覧をまとめてみました。

addEventListenerの種類一覧を紹介

まずは、addEventListenerの種類一覧を紹介します。

click ボタンをクリックしたとき
submit フォームボタンのsubmitを押したとき
scroll 画面(ウィンドウ)をスクロールしたとき
load ページの全ての読み込みが完了したとき(画像等含む)
DOMContentLoaded ページの全ての読み込みが完了したとき(画像等含まない)
mousedown マウスを押してるとき(クリックし続けてる状態)
mouseup マウスを押して離したとき(クリックして離したとき)
mousemove マウスのカーソルを動かしたとき
keydown キーボードを押したとき
keyup キーボードを入力して離したあと(タイピング後)
keypress キーボードを押し続けているとき
change input,select,textareaでユーザー操作で変更があったとき

addEventListenerとは?

addEventListenerとは、マウスをクリックしたり、ホバーしたり、キーボードを入力した際に行われるイベント処理を実行することを指します。

  • 対象となるイベント.addEventListener('イベントさせたい処理'、関数、false)

上記のように記述します。
()の中身は、左から第1引数(イベントの種類)、第2引数(関数)、第3引数(trueかfalse)で記述します。
基本的には第3引数は通常であればfalseを指定します。

addEventListenerの使い方

例えば下記のような使い方があります。


対象の要素.addEventListener('.button'),function(){
  //ここに実行したい処理を書く
}

こちらは一般的な書き方です。

無名関数


//無名関数
対象の要素.addEventListener(種類, function() {
  //処理をここに書く
}, false);
//上記の例
対象の要素.addEventListener('click', function(){
  //処理をここに書く
});

基本的な方法でよく見かける書き方です。
第2引数に関数をそのまま記述して、シンプルに書くことができます。

関数の外部で設定する


//関数を外部で設定する
// 対象の要素.addEventListener(種類, 関数, false);
対象の要素.addEventListener(種類, sample, false);
function sample() {
  //一般的な書き方
  //処理をここに書く
}
//上記の例
const button = document.querySelector('button');
function button(){
  //処理をここに書く
};

関数を外で記述してます。
const、letなどでbuttonのタグを取得して定数にしたあと、button()という関数名で処理を実行する中身を記述していきます。

アロー関数



//アロー関数
対象の要素.addEventListener(種類, () => {
  //処理をここに書く
});
//上記の例
const button = document.querySelector('button');
button.addEventListener('click', ()=>{
  //処理をここに書く
});

こちらは最近の主流の書き方だと思います。thisをまとめて処理できるので便利です。

addEventListenerのサンプルコード

サンプルコードも記述していきます。


const themeChangeButton =
  document.querySelector('.theme-change-button');
// テーマ変更ボタンをクリックしたときの処理
themeChangeButton.addEventListener('click', () => {
  // body要素のクラスの「theme-dark」を切り替える
  document.body.classList.toggle('theme-dark');
});

少しだけでもイメージが湧くことができれば幸いです。

他にも参考記事を下記に貼付しておきます。

以上になります。

参考になったらぜひリツイートしてくれると嬉しいです。
リツイートする

この記事がイイなと思ったらシェアお願いします\(^^)/

合わせて読みたい記事