よく使われるJavaScriptイベント一覧！【14選】

「あれ…？こういう処理をしたい時って何のイベントを使えば良いんだっけ？」
JavaScriptを記述している時に私がよく上記のようになります。
実際に調べてみると数えられないほどのJavaScriptイベントが出てきますよね。
ひえ〜！こ、こんなにあるの…？覚えられない…

そんな自分のためにも、よく使うJavaScriptイベント一覧をまとめてみました。

load(コンテンツのロードが完了した時)

（例）ローディング画面を実装したい時。
前回の記事で使いました！
JavaScript全文や完成したローディング画面のプレビューもあるのでぜひ覗いてみてください！

window.addEventListener('load', function() {
        alert('ページが読み込まれました！');
});

---

dbclick(ダブルクリックされた時)

<button id="dblClickBtn">ダブルクリックしてね</button>

document.getElementById('dblClickBtn').addEventListener('dblclick', function() {
        alert('ダブルクリックされました！');
});

---

click(クリックされた時)

<button id="clickBtn">クリックしてね</button>

document.getElementById('clickBtn').addEventListener('click', function() {
        alert('ボタンがクリックされました！');
});

---

submit(フォームが送信された時)

<form id="myForm">
    <input type="text" name="username" placeholder="ユーザー名">
    <button type="submit">送信</button>
</form>

document.getElementById('myForm').addEventListener('submit', function(event) {
        event.preventDefault();
        alert('フォームが送信されました！');
});

---

reset(フォーム内容がリセットされた時)

<form id="resetForm">
    <input type="text" name="username" placeholder="ユーザー名">
    <button type="reset">リセット</button>
</form>

document.getElementById('resetForm').addEventListener('reset', function() {
        alert('フォームがリセットされました！');
});

---

resize(画面のサイズが変わった時)

window.addEventListener('resize', function() {
        console.log('ウィンドウのサイズが変更されました！');
});

デベロッパーツールのconsole.logを確認してみてね。

※デベロッパーツールの開き方（Google Chrome）
[表示] > [デベロッパー] > [デベロッパー ツール] の順に選択します。「alt+command+i」ショートカットを使用します。

---

scroll(画面をスクロールした時)

<div style="height: 200vh;">スクロールしてね</div>

window.addEventListener('scroll', function() {
        console.log('スクロールされました！');
});

デベロッパーツールのconsole.logを確認してみてね。

---

copy(要素がコピーされた時)

<input type="text" value="コピーしてね" id="copyInput">

document.getElementById('copyInput').addEventListener('copy', function() {
        alert('テキストがコピーされました！');
});

---

paste(要素がペーストされた時)

<input type="text" placeholder="ここにペーストしてね" id="pasteInput">

document.getElementById('pasteInput').addEventListener('paste', function() {
        alert('テキストがペーストされました！');
});

---

keydown(キーを押した時)

<input type="text" placeholder="キーを押してね" id="keyInput">

document.getElementById('keyInput').addEventListener('keydown', function(event) {
        alert('キーが押されました: ' + event.key);
});

---

keyup(キーを離した時)

<input type="text" placeholder="キーを離してね" id="keyUpInput">

document.getElementById('keyUpInput').addEventListener('keyup', function(event) {
        alert('キーが離されました: ' + event.key);
});

---

select(テキストを選択した時)

<input type="text" value="テキストを選択してね" id="selectInput">

document.getElementById('selectInput').addEventListener('select', function() {
        alert('テキストが選択されました！');
});

---

input(入力した時)

<input type="text" placeholder="何か入力してね" id="inputField">

document.getElementById('inputField').addEventListener('input', function() {
        console.log('入力が行われました！');
});

---

change(変化があった時)

<input type="text" placeholder="内容を変更してね" id="changeInput">

document.getElementById('changeInput').addEventListener('change', function() {
        alert('値が変更されました！');
 });

---