【JavaScript】addEventListenerの種類一覧・使い方を紹介
PR ※当サイトではアフィリエイト広告を利用しています
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');
});
少しだけでもイメージが湧くことができれば幸いです。
他にも参考記事を下記に貼付しておきます。
以上になります。
参考になったらぜひリツイートしてくれると嬉しいです。
リツイートする
合わせて読みたい記事
