JavaScriptのイベント操作でよく使うイベント20選！使い方を解説！

JavaScript

【 2025/06/14 00:00 更新】

JavaScriptのイベントって？

JavaScriptのイベントは、Webページ上で特定の何かが起こったときに処理を実行させることができます。

クリックしたとき、キーボード入力をしたとき、ページ読み込み時など、様々なイベントを定義できます。

イベント操作はJavaScriptの醍醐味だよ！
Webページの機能や動きを作れるよ〜！

JavaScriptのイベントの書き方｜Elementオブジェクト.addEventListener(イベント, function(){})

【 JSのイベントの書き方】

Elementオブジェクト.addEventListener("イベント名", function() {
　　　　処理 // イベントが起こった場合に実行される！
});

【例】
let button01 = document.getElementById("button01");
button01.addEventListener("click", function() {
　　　　alert("ボタンがクリックされました！");
});

本記事は、JavaScriptの基礎知識をおさえた前提の内容です。

JavaScriptとは？変数,配列,連想配列,条件,繰り返し,関数,DOM操作など基本的な使い方を解説！

こじはなNote

JS
イベントclick｜要素がクリックされたとき

clickイベントは、要素がクリックされたときのイベントです。

「Elementオブジェクト.addEventListener("click", function(){})」と書きます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <button id="button01">ボタン</button>
    </body>
</html>

【 JavaScript 】


// idが"button01"のDOM要素を取得
let button01 = document.getElementById("button01");

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

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

JS
イベントdblclick｜要素がダブルクリックされたとき

dblclickイベントは、要素がダブルクリックされたときのイベントです。

「Elementオブジェクト.addEventListener("dblclick", function(){})」と書きます。

【 HTML 】



<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <h1>ボタンをダブルクリックしてみて！</h1>
        <button id="button01">ボタン</button>
    </body>
</html>

【 JavaScript 】


// idが"button01"のDOM要素を取得
let button01 = document.getElementById("button01");

button01.addEventListener("dblclick", function() {
    alert("ボタンがダブルクリックされました！");
});

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

JS
イベントcontextmenu｜右クリックメニューが開かれたとき

contextmenuイベントは、右クリックメニューが開かれたときのイベントです。

Macやパソコンの設定によっては"二本指クリック"だったり、その他操作方法の場合があります。

「Elementオブジェクト.addEventListener("contextmenu", function(){})」と書きます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <h1>右クリックメニューを開いてみて！</h1>
    </body>
</html>

【 JavaScript 】


window.addEventListener("contextmenu", function() {
    alert("右クリックメニューが開きました！");
});

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

JS
イベントkeydown｜キーが押されたとき

keydownイベントは、キーが押されたときのイベントです。

「Elementオブジェクト.addEventListener("keydown", function(){})」と書きます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <h1>キーを押してみて！</h1>
    </body>
</html>

【 JavaScript 】


window.addEventListener("keydown", function() {
    alert("キーが押されました！");
});

ブラウザで実行するとこんな感じです。

以下のエリアをクリック後、キー入力してみてください！

JS
イベントkeyup｜キーが離されたとき

keyupイベントは、キーが離されたときのイベントです。

「Elementオブジェクト.addEventListener("keyup", function(){})」と書きます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <h1>キーを押して、離してみて！</h1>
    </body>
</html>

【 JavaScript 】


window.addEventListener("keyup", function() {
    alert("キーが離されました！");
});

ブラウザで実行するとこんな感じです。

以下のエリアをクリック後、キー入力してみてください！

JS
イベントmousedown｜クリックボタンが押されたとき

mousedownイベントは、クリックボタンが押されたときのイベントです。

「Elementオブジェクト.addEventListener("mousedown", function(){})」と書きます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <h1>クリックボタンを押してみて！</h1>
    </body>
</html>

【 JavaScript 】


window.addEventListener("mousedown", function() {
    alert("クリックボタンが押されました！");
});

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

JS
イベントmouseup｜クリックボタンが離されたとき

mouseupイベントは、クリックボタンが離されたときのイベントです。

「Elementオブジェクト.addEventListener("mouseup", function(){})」と書きます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <h1>クリックボタンを離してみて！</h1>
    </body>
</html>

【 JavaScript 】


window.addEventListener("mouseup", function() {
    alert(クリックボタンが離されました！");
});

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

JS
イベントmousemove｜カーソルが動いたとき

mousemoveイベントは、カーソルが動いたときのイベントです。

「Elementオブジェクト.addEventListener("mousemove", function(){})」と書きます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <h1>カーソルを動かしてみて！</h1>
    </body>
</html>

【 JavaScript 】


window.addEventListener("mousemove", function() {
    alert(カーソルが動きました！");
});

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

JS
イベントmouseenter｜カーソルが要素に入ったとき

mouseenterイベントは、カーソルが要素に入ったときのイベントです。

似ているmouseoverイベントでは子要素を出入りするとイベント再発火しますが、 mouseenterイベントでは子要素を出入りしても再発火しません。

「Elementオブジェクト.addEventListener("mouseenter", function(){})」と書きます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <h2 id="count-txt">0回カーソルが要素に入りました！</h2>
        <div id="block01" style="width:300px; height:200px; background-color:aqua;">
            ここにカーソルを入れてみて！
            <div style="width:100px; height:100px; background-color:beige;">
                子要素
            </div>
        </div>
    </body>
</html>

【 JavaScript 】


// idが"block01"のDOM要素を取得
let block01 = document.getElementById("block01");

// イベント発火カウンター
let count_txt = document.getElementById("count-txt");
let count = 0;

block01.addEventListener("mouseenter", function() {
    count++; // インクリメントで1加算
    count_txt.textContent = count + "回カーソルが要素に入りました！";
});

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

インクリメント"変数++"とは

プログラミングのインクリメントとは、1加算することを言います。

JavaScriptでは"変数名++"/"++変数名"で、インクリメントとなります。

（1減算することをデクリメントと呼び、"変数名--"/"--変数名"と書きます。）

JS
イベントmouseleave｜カーソルが要素から出たとき

mouseleaveイベントは、カーソルが要素から出たときのイベントです。

似ているmouseoutイベントでは子要素を出入りするとイベント再発火しますが、 mouseleaveイベントでは子要素を出入りしても再発火しません。

「Elementオブジェクト.addEventListener("mouseleave", function(){})」と書きます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <h2 id="count-txt">0回カーソルが要素から出ました！</h2>
        <div id="block01" style="width:300px; height:200px; background-color:aqua;">
            ここにカーソルを入れて、出してみて！
            <div style="width:100px; height:100px; background-color:beige;">
                子要素
            </div>
        </div>
    </body>
</html>

【 JavaScript 】


// idが"block01"のDOM要素を取得
let block01 = document.getElementById("block01");

// イベント発火カウンター
let count_txt = document.getElementById("count-txt");
let count = 0;

block01.addEventListener("mouseleave", function() {
    count++; // インクリメントで1加算
    count_txt.textContent = count + "回カーソルが要素を出ました！";
});

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

インクリメント"変数++"とは

プログラミングのインクリメントとは、1加算することを言います。

JavaScriptでは"変数名++"/"++変数名"で、インクリメントとなります。

（1減算することをデクリメントと呼び、"変数名--"/"--変数名"と書きます。）

JS
イベントmouseover｜カーソルが要素に乗ったとき（子要素で再発火）

mouseoverイベントは、カーソルが要素に乗ったときのイベントです。

似ているmouseenterイベントでは子要素を出入りしてもイベント再発火しませんが、 mouseoverイベントでは子要素を出入りすると再発火します。

「Elementオブジェクト.addEventListener("mouseover", function(){})」と書きます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <h2 id="count-txt">0回カーソルが要素に乗りました！</h2>
        <div id="block01" style="width:300px; height:200px; background-color:aqua;">
            ここにカーソルを入れてみて！
            <div style="width:100px; height:100px; background-color:beige;">
                子要素
            </div>
        </div>
    </body>
</html>

【 JavaScript 】


// idが"block01"のDOM要素を取得
let block01 = document.getElementById("block01");

// イベント発火カウンター
let count_txt = document.getElementById("count-txt");
let count = 0;

block01.addEventListener("mouseover", function() {
    count++;  // インクリメントで1加算
    count_txt.textContent = count + "回カーソルが要素に乗りました！";
});

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

インクリメント"変数++"とは

プログラミングのインクリメントとは、1加算することを言います。

JavaScriptでは"変数名++"/"++変数名"で、インクリメントとなります。

（1減算することをデクリメントと呼び、"変数名--"/"--変数名"と書きます。）

JS
イベントmouseout｜カーソルが要素から離れたとき（子要素で再発火）

mouseoutイベントは、カーソルが要素から離れたときのイベントです。

似ているmouseleaveイベントでは子要素を出入りしてもイベント再発火しませんが、 mouseoutイベントでは子要素から出入りすると再発火します。

「Elementオブジェクト.addEventListener("mouseout", function(){})」と書きます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <h2 id="count-txt">0回カーソルが要素から離れました！</h2>
        <div id="block01" style="width:300px; height:200px; background-color:aqua;">
            ここにカーソルを入れて、出してみて！
            <div style="width:100px; height:100px; background-color:beige;">
                子要素
            </div>
        </div>
    </body>
</html>

【 JavaScript 】


// idが"block01"のDOM要素を取得
let block01 = document.getElementById("block01");

// イベント発火カウンター
let count_txt = document.getElementById("count-txt");
let count = 0;

block01.addEventListener("mouseout", function() {
    count++;  // インクリメントで1加算
    count_txt.textContent = count + "回カーソルが要素から離れました！";
});

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

インクリメント"変数++"とは

プログラミングのインクリメントとは、1加算することを言います。

JavaScriptでは"変数名++"/"++変数名"で、インクリメントとなります。

（1減算することをデクリメントと呼び、"変数名--"/"--変数名"と書きます。）

JS
イベントsubmit｜フォームがsubmit(送信)されるとき

submitイベントは、フォームがsubmit(送信)されるときのイベントです。

「Elementオブジェクト.addEventListener("submit", function(){})」と書きます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <form method="get" action="">
            <button type="submit">submitボタン</button>
        </form>
    </body>
</html>

【 JavaScript 】


window.addEventListener("submit", function() {
    alert("submitされました！");
});

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

formタグとは

formタグとは、入力系要素の入力内容をまとめるタグです。

内包した入力系要素の入力内容を送信(submit)するための設定を定義できます。

実際に操作してみてください！

※スタイルがデフォルトと異なる点はご了承ください。

コードはこんな感じです！

【送信前の画面用HTML 】


<form action="/demoPage/getTest.html" method="get">
    <!-- テキストボックス -->
    <input type="text" name="text01">
    <br>
    <!-- ラジオボタン -->
    <label>5個:</label><input type="radio" name="radio01" value="5">
    <label>10個:</label><input type="radio" name="radio01" value="10">
    <label>100個:</label><input type="radio" name="radio01" value="100">
    <br>
    <!-- チェックボックス -->
    <label>みかん</label><input type="checkbox" name="check01" value="みかん">
    <label>りんご</label><input type="checkbox" name="check01" value="りんご">
    <label>いちご</label><input type="checkbox" name="check01" value="いちご">
    <br>
    <!-- プルダウンメニュー -->
    <select name="select01">
        <option value="りんご">りんご</option>
        <option value="みかん">みかん</option>
        <option value="いちご">いちご</option>
    </select>
    <br>
    <!-- サブミットボタン -->
    <input type="submit" value="送信">
</form>

【 formタグの属性】

action属性：送信先のURLやパスを指定。
method属性：GET通信やPOST通信など送信時の通信の種類を指定。

※パスとはファイルやディレクトリ（フォルダー）がある場所のことです。

【 formタグに詳しい記事】

formタグとは？HTML＋JSで入力内容を送受信する方法と基本属性を解説

こじはなNote

【パスの基本に関する記事】

パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！

こじはなNote

【 GET通信・POST通信に詳しい記事】

GET通信・POST通信とは？2つの違いと通信の構造を解説します！

こじはなNote

JS
イベントchange｜入力系要素の入力値が変更されたとき

changeイベントは、inputやselectなど入力系要素の入力値が変更されたときのイベントです。

似ているinputイベントでは入力内容が変わるたびにイベント発火しますが、 changeイベントではフォーカスが解除されたときにイベント発火します。

「Elementオブジェクト.addEventListener("change", function(){})」と書きます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <form method="get" id="form01">
            <input type="text"><br>
            <select id="select01">
                <option value="0">りんご</option>
                <option value="1">みかん</option>
                <option value="2">いちご</option>
            </select>
        </form>
    </body>
</html>

【 JavaScript 】


// idが"form01"のDOM要素を取得
let form01 = document.getElementById("form01");

form01.addEventListener("change", function() {
    alert("formタグ内の入力要素の値が変更されました！");
});

// idが"select01"のDOM要素を取得
let select01 = document.getElementById("select01");

select01.addEventListener("change", function() {
    alert("selectタグの値が変更されました！");
});

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

formタグとは

formタグとは、入力系要素の入力内容をまとめるタグです。

内包した入力系要素の入力内容を送信(submit)するための設定を定義できます。

実際に操作してみてください！

※スタイルがデフォルトと異なる点はご了承ください。

コードはこんな感じです！

【送信前の画面用HTML 】


<form action="/demoPage/getTest.html" method="get">
    <!-- テキストボックス -->
    <input type="text" name="text01">
    <br>
    <!-- ラジオボタン -->
    <label>5個:</label><input type="radio" name="radio01" value="5">
    <label>10個:</label><input type="radio" name="radio01" value="10">
    <label>100個:</label><input type="radio" name="radio01" value="100">
    <br>
    <!-- チェックボックス -->
    <label>みかん</label><input type="checkbox" name="check01" value="みかん">
    <label>りんご</label><input type="checkbox" name="check01" value="りんご">
    <label>いちご</label><input type="checkbox" name="check01" value="いちご">
    <br>
    <!-- プルダウンメニュー -->
    <select name="select01">
        <option value="りんご">りんご</option>
        <option value="みかん">みかん</option>
        <option value="いちご">いちご</option>
    </select>
    <br>
    <!-- サブミットボタン -->
    <input type="submit" value="送信">
</form>

【 formタグの属性】

action属性：送信先のURLやパスを指定。
method属性：GET通信やPOST通信など送信時の通信の種類を指定。

※パスとはファイルやディレクトリ（フォルダー）がある場所のことです。

【 formタグに詳しい記事】

formタグとは？HTML＋JSで入力内容を送受信する方法と基本属性を解説

こじはなNote

【パスの基本に関する記事】

パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！

こじはなNote

【 GET通信・POST通信に詳しい記事】

GET通信・POST通信とは？2つの違いと通信の構造を解説します！

こじはなNote

inputタグとは

inputタグとは入力ができる要素です。
type属性に指定する値によって、様々な種類の入力要素になります。
formタグに内包して値を別の画面やプログラムに渡したり、JavaScriptと一緒に使ったりします。

【 inputタグ基本な属性】

type属性：入力要素の種類を指定でき、値はtext/radio/submit/checkboxなどがあります。
name属性：入力値を受け渡しするためのキー名です。このinput要素の名前はこれ！と決めます。
value属性：入力値を指定できます。入力系要素の初期値や選択肢ごとの値を定義するときに使います。

【 type属性の値の種類】

text：文字を入力できます。
radio：ラジオボタンとなり、複数の選択肢の中から1つ選択させるときに使います。
checkbox：チェックボックスとなり、複数選択可能にさせるときに使います。
number：数値を入力できます。
email：メールアドレスを入力できます。
submit：入力内容を送信(submit)する用のボタンです。

※他にもたくさんの種類があります。

【コード例】

<!-- テキストボックス -->
<input type="text" name="text01" value="デフォルトテキスト">
<br>
<!-- ラジオボタン -->
<label>5個:</label><input type="radio" name="radio01" value="5">
<label>10個:</label><input type="radio" name="radio01" value="10">
<label>100個:</label><input type="radio" name="radio01" value="100">
<br>
<!-- チェックボックス -->
<label>みかん</label><input type="checkbox" name="check01" value="orange">
<label>りんご</label><input type="checkbox" name="check01" value="apple">
<label>いちご</label><input type="checkbox" name="check01" value="strawberry">
<br>
<!-- 数値 -->
<input type="number" name="number01" value="">
<br>
<!-- メールアドレス -->
<input type="email" name="email01" value="">
<br>
<!-- 送信ボタン -->
<input type="submit" value="submit01">

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

【inputタグに関する記事】

inputタグ｜type属性の値によって様々な種類の入力ができる

入力系タグ(input/select/option/textarea/buttonタグ)と入力系属性の使い方

こじはなNote

selectタグとは

selectタグとはプルダウンメニューを定義できるタグです。
selectタグの選択肢を定義するoptionタグと一緒に使います。

<select required>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

【selectタグに関する記事】

selectタグ・optionタグ｜selectタグでプルダウンメニューを定義し、選択肢はoptionタグで定義

入力系タグ(input/select/option/textarea/buttonタグ)と入力系属性の使い方

こじはなNote

JS
イベントinput｜入力フィールドの内容が変更されたとき（リアルタイム）

inputイベントは、inputやselectなど入力系要素の入力フィールドの内容が変更されたときのイベントです。

似ているchangeイベントではフォーカスが解除されたときにイベント発火しますが、 inputイベントでは入力内容が変わるたびにリアルタイムでイベント発火します。

「Elementオブジェクト.addEventListener("input", function(){})」と書きます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <form method="get" id="form01">
            <input type="text"><br>
            <select id="select01">
                <option value="0">りんご</option>
                <option value="1">みかん</option>
                <option value="2">いちご</option>
            </select>
        </form>
    </body>
</html>

【 JavaScript 】


// idが"form01"のDOM要素を取得
let form01 = document.getElementById("form01");

form01.addEventListener("input", function() {
    alert("formタグ内の入力要素の値が変更されています！");
});

// idが"select01"のDOM要素を取得
let select01 = document.getElementById("select01");

select01.addEventListener("input", function() {
    alert("selectタグの値が変更されています！");
});

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

formタグとは

formタグとは、入力系要素の入力内容をまとめるタグです。

内包した入力系要素の入力内容を送信(submit)するための設定を定義できます。

実際に操作してみてください！

※スタイルがデフォルトと異なる点はご了承ください。

コードはこんな感じです！

【送信前の画面用HTML 】


<form action="/demoPage/getTest.html" method="get">
    <!-- テキストボックス -->
    <input type="text" name="text01">
    <br>
    <!-- ラジオボタン -->
    <label>5個:</label><input type="radio" name="radio01" value="5">
    <label>10個:</label><input type="radio" name="radio01" value="10">
    <label>100個:</label><input type="radio" name="radio01" value="100">
    <br>
    <!-- チェックボックス -->
    <label>みかん</label><input type="checkbox" name="check01" value="みかん">
    <label>りんご</label><input type="checkbox" name="check01" value="りんご">
    <label>いちご</label><input type="checkbox" name="check01" value="いちご">
    <br>
    <!-- プルダウンメニュー -->
    <select name="select01">
        <option value="りんご">りんご</option>
        <option value="みかん">みかん</option>
        <option value="いちご">いちご</option>
    </select>
    <br>
    <!-- サブミットボタン -->
    <input type="submit" value="送信">
</form>

【 formタグの属性】

action属性：送信先のURLやパスを指定。
method属性：GET通信やPOST通信など送信時の通信の種類を指定。

※パスとはファイルやディレクトリ（フォルダー）がある場所のことです。

【 formタグに詳しい記事】

formタグとは？HTML＋JSで入力内容を送受信する方法と基本属性を解説

こじはなNote

【パスの基本に関する記事】

パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！

こじはなNote

【 GET通信・POST通信に詳しい記事】

GET通信・POST通信とは？2つの違いと通信の構造を解説します！

こじはなNote

inputタグとは

【 inputタグ基本な属性】

type属性：入力要素の種類を指定でき、値はtext/radio/submit/checkboxなどがあります。
name属性：入力値を受け渡しするためのキー名です。このinput要素の名前はこれ！と決めます。
value属性：入力値を指定できます。入力系要素の初期値や選択肢ごとの値を定義するときに使います。

【 type属性の値の種類】

text：文字を入力できます。
radio：ラジオボタンとなり、複数の選択肢の中から1つ選択させるときに使います。
checkbox：チェックボックスとなり、複数選択可能にさせるときに使います。
number：数値を入力できます。
email：メールアドレスを入力できます。
submit：入力内容を送信(submit)する用のボタンです。

※他にもたくさんの種類があります。

【コード例】

<!-- テキストボックス -->
<input type="text" name="text01" value="デフォルトテキスト">
<br>
<!-- ラジオボタン -->
<label>5個:</label><input type="radio" name="radio01" value="5">
<label>10個:</label><input type="radio" name="radio01" value="10">
<label>100個:</label><input type="radio" name="radio01" value="100">
<br>
<!-- チェックボックス -->
<label>みかん</label><input type="checkbox" name="check01" value="orange">
<label>りんご</label><input type="checkbox" name="check01" value="apple">
<label>いちご</label><input type="checkbox" name="check01" value="strawberry">
<br>
<!-- 数値 -->
<input type="number" name="number01" value="">
<br>
<!-- メールアドレス -->
<input type="email" name="email01" value="">
<br>
<!-- 送信ボタン -->
<input type="submit" value="submit01">

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

【inputタグに関する記事】

inputタグ｜type属性の値によって様々な種類の入力ができる

入力系タグ(input/select/option/textarea/buttonタグ)と入力系属性の使い方

こじはなNote

selectタグとは

selectタグとはプルダウンメニューを定義できるタグです。
selectタグの選択肢を定義するoptionタグと一緒に使います。

<select required>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

【selectタグに関する記事】

selectタグ・optionタグ｜selectタグでプルダウンメニューを定義し、選択肢はoptionタグで定義

入力系タグ(input/select/option/textarea/buttonタグ)と入力系属性の使い方

こじはなNote

JS
イベントfocus｜要素にフォーカスしたとき

focusイベントは、要素にフォーカスしたときのイベントです。

「Elementオブジェクト.addEventListener("focus", function(){})」と書きます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <form method="get">
            <input type="text" id="text01"><br>
            <select id="select01">
                <option value="0">りんご</option>
                <option value="1">みかん</option>
                <option value="2">いちご</option>
            </select>
        </form>
    </body>
</html>

【 JavaScript 】


// idが"text01"のDOM要素を取得
let text01 = document.getElementById("text01");

let text01_focused = false; // フォーカスしたかのフラグ

text01.addEventListener("focus", function() {
    if(!text01_focused) { // 1度もフォーカスしてなかったら実行
        alert("テキストボックスがフォーカスされました！");
        text01_focused = true;
    }
});

// idが"select01"のDOM要素を取得
let select01 = document.getElementById("select01");

let select01_focused = false; // フォーカスしたかのフラグ

select01.addEventListener("focus", function() {
    if(!select01_focused) { // 1度もフォーカスしてなかったら実行
        alert("selectタグがフォーカスされました！");
        select01_focused = true;
    }
});

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

条件分岐のif()とは

if文は、「もし〇〇のときに実行する」という意味を表します。
プログラミングにおいて基本な条件分岐の命令文です。

【 JSのif文の書き方】

〜多分岐なし〜
if (条件A) {
　　　　処理A // 条件Aが真(true)だったら実行！
}
〜多分岐〜
if (条件A) {
　　　　処理A // 条件Aが真(true)だったら実行！
} else if (条件B) {
　　　　処理B // 条件Aが偽(false)で、条件Bが真(true)だったら実行！
} else {
　　　　処理C // 条件A・条件Bどちらも偽(false)だったら実行！
}

【if文に関する記事】

JavaScriptの条件分岐｜if文（もし〇〇のとき実行）

JavaScriptとは？変数,配列,連想配列,条件,繰り返し,関数,DOM操作など基本的な使い方を解説！

こじはなNote

formタグとは

formタグとは、入力系要素の入力内容をまとめるタグです。

内包した入力系要素の入力内容を送信(submit)するための設定を定義できます。

実際に操作してみてください！

※スタイルがデフォルトと異なる点はご了承ください。

コードはこんな感じです！

【送信前の画面用HTML 】


<form action="/demoPage/getTest.html" method="get">
    <!-- テキストボックス -->
    <input type="text" name="text01">
    <br>
    <!-- ラジオボタン -->
    <label>5個:</label><input type="radio" name="radio01" value="5">
    <label>10個:</label><input type="radio" name="radio01" value="10">
    <label>100個:</label><input type="radio" name="radio01" value="100">
    <br>
    <!-- チェックボックス -->
    <label>みかん</label><input type="checkbox" name="check01" value="みかん">
    <label>りんご</label><input type="checkbox" name="check01" value="りんご">
    <label>いちご</label><input type="checkbox" name="check01" value="いちご">
    <br>
    <!-- プルダウンメニュー -->
    <select name="select01">
        <option value="りんご">りんご</option>
        <option value="みかん">みかん</option>
        <option value="いちご">いちご</option>
    </select>
    <br>
    <!-- サブミットボタン -->
    <input type="submit" value="送信">
</form>

【 formタグの属性】

action属性：送信先のURLやパスを指定。
method属性：GET通信やPOST通信など送信時の通信の種類を指定。

※パスとはファイルやディレクトリ（フォルダー）がある場所のことです。

【 formタグに詳しい記事】

formタグとは？HTML＋JSで入力内容を送受信する方法と基本属性を解説

こじはなNote

【パスの基本に関する記事】

パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！

こじはなNote

【 GET通信・POST通信に詳しい記事】

GET通信・POST通信とは？2つの違いと通信の構造を解説します！

こじはなNote

inputタグとは

【 inputタグ基本な属性】

type属性：入力要素の種類を指定でき、値はtext/radio/submit/checkboxなどがあります。
name属性：入力値を受け渡しするためのキー名です。このinput要素の名前はこれ！と決めます。
value属性：入力値を指定できます。入力系要素の初期値や選択肢ごとの値を定義するときに使います。

【 type属性の値の種類】

text：文字を入力できます。
radio：ラジオボタンとなり、複数の選択肢の中から1つ選択させるときに使います。
checkbox：チェックボックスとなり、複数選択可能にさせるときに使います。
number：数値を入力できます。
email：メールアドレスを入力できます。
submit：入力内容を送信(submit)する用のボタンです。

※他にもたくさんの種類があります。

【コード例】

<!-- テキストボックス -->
<input type="text" name="text01" value="デフォルトテキスト">
<br>
<!-- ラジオボタン -->
<label>5個:</label><input type="radio" name="radio01" value="5">
<label>10個:</label><input type="radio" name="radio01" value="10">
<label>100個:</label><input type="radio" name="radio01" value="100">
<br>
<!-- チェックボックス -->
<label>みかん</label><input type="checkbox" name="check01" value="orange">
<label>りんご</label><input type="checkbox" name="check01" value="apple">
<label>いちご</label><input type="checkbox" name="check01" value="strawberry">
<br>
<!-- 数値 -->
<input type="number" name="number01" value="">
<br>
<!-- メールアドレス -->
<input type="email" name="email01" value="">
<br>
<!-- 送信ボタン -->
<input type="submit" value="submit01">

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

【inputタグに関する記事】

inputタグ｜type属性の値によって様々な種類の入力ができる

入力系タグ(input/select/option/textarea/buttonタグ)と入力系属性の使い方

こじはなNote

selectタグとは

selectタグとはプルダウンメニューを定義できるタグです。
selectタグの選択肢を定義するoptionタグと一緒に使います。

<select required>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

【selectタグに関する記事】

selectタグ・optionタグ｜selectタグでプルダウンメニューを定義し、選択肢はoptionタグで定義

入力系タグ(input/select/option/textarea/buttonタグ)と入力系属性の使い方

こじはなNote

JS
イベントblur｜要素からフォーカスが外れたとき

blurイベントは、要素からフォーカスが外れたときのイベントです。

「Elementオブジェクト.addEventListener("blur", function(){})」と書きます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <form method="get">
            <input type="text" id="text01"><br>
            <select id="select01">
                <option value="0">りんご</option>
                <option value="1">みかん</option>
                <option value="2">いちご</option>
            </select>
        </form>
    </body>
</html>

【 JavaScript 】


// idが"text01"のDOM要素を取得
let text01 = document.getElementById("text01");

let text01_out_focused = false; // フォーカスしたかのフラグ

text01.addEventListener("blur", function() {
    if(!text01_out_focused) { // 1度もフォーカス外れてなかったら実行
        alert("テキストボックスがフォーカスから外れました！");
        text01_out_focused = true;
    }
});

// idが"select01"のDOM要素を取得
let select01 = document.getElementById("select01");

let select01_out_focused = false; // フォーカスしたかのフラグ

select01.addEventListener("blur", function() {
    if(!select01_out_focused) { // 1度もフォーカス外れてなかったら実行
        alert("selectタグがフォーカスから外れました！");
        select01_out_focused = true;
    }
});

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

条件分岐のif()とは

if文は、「もし〇〇のときに実行する」という意味を表します。
プログラミングにおいて基本な条件分岐の命令文です。

【 JSのif文の書き方】

【if文に関する記事】

JavaScriptの条件分岐｜if文（もし〇〇のとき実行）

JavaScriptとは？変数,配列,連想配列,条件,繰り返し,関数,DOM操作など基本的な使い方を解説！

こじはなNote

formタグとは

formタグとは、入力系要素の入力内容をまとめるタグです。

内包した入力系要素の入力内容を送信(submit)するための設定を定義できます。

実際に操作してみてください！

※スタイルがデフォルトと異なる点はご了承ください。

コードはこんな感じです！

【送信前の画面用HTML 】


<form action="/demoPage/getTest.html" method="get">
    <!-- テキストボックス -->
    <input type="text" name="text01">
    <br>
    <!-- ラジオボタン -->
    <label>5個:</label><input type="radio" name="radio01" value="5">
    <label>10個:</label><input type="radio" name="radio01" value="10">
    <label>100個:</label><input type="radio" name="radio01" value="100">
    <br>
    <!-- チェックボックス -->
    <label>みかん</label><input type="checkbox" name="check01" value="みかん">
    <label>りんご</label><input type="checkbox" name="check01" value="りんご">
    <label>いちご</label><input type="checkbox" name="check01" value="いちご">
    <br>
    <!-- プルダウンメニュー -->
    <select name="select01">
        <option value="りんご">りんご</option>
        <option value="みかん">みかん</option>
        <option value="いちご">いちご</option>
    </select>
    <br>
    <!-- サブミットボタン -->
    <input type="submit" value="送信">
</form>

【 formタグの属性】

action属性：送信先のURLやパスを指定。
method属性：GET通信やPOST通信など送信時の通信の種類を指定。

※パスとはファイルやディレクトリ（フォルダー）がある場所のことです。

【 formタグに詳しい記事】

formタグとは？HTML＋JSで入力内容を送受信する方法と基本属性を解説

こじはなNote

【パスの基本に関する記事】

パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！

こじはなNote

【 GET通信・POST通信に詳しい記事】

GET通信・POST通信とは？2つの違いと通信の構造を解説します！

こじはなNote

inputタグとは

【 inputタグ基本な属性】

type属性：入力要素の種類を指定でき、値はtext/radio/submit/checkboxなどがあります。
name属性：入力値を受け渡しするためのキー名です。このinput要素の名前はこれ！と決めます。
value属性：入力値を指定できます。入力系要素の初期値や選択肢ごとの値を定義するときに使います。

【 type属性の値の種類】

text：文字を入力できます。
radio：ラジオボタンとなり、複数の選択肢の中から1つ選択させるときに使います。
checkbox：チェックボックスとなり、複数選択可能にさせるときに使います。
number：数値を入力できます。
email：メールアドレスを入力できます。
submit：入力内容を送信(submit)する用のボタンです。

※他にもたくさんの種類があります。

【コード例】

<!-- テキストボックス -->
<input type="text" name="text01" value="デフォルトテキスト">
<br>
<!-- ラジオボタン -->
<label>5個:</label><input type="radio" name="radio01" value="5">
<label>10個:</label><input type="radio" name="radio01" value="10">
<label>100個:</label><input type="radio" name="radio01" value="100">
<br>
<!-- チェックボックス -->
<label>みかん</label><input type="checkbox" name="check01" value="orange">
<label>りんご</label><input type="checkbox" name="check01" value="apple">
<label>いちご</label><input type="checkbox" name="check01" value="strawberry">
<br>
<!-- 数値 -->
<input type="number" name="number01" value="">
<br>
<!-- メールアドレス -->
<input type="email" name="email01" value="">
<br>
<!-- 送信ボタン -->
<input type="submit" value="submit01">

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

【inputタグに関する記事】

inputタグ｜type属性の値によって様々な種類の入力ができる

入力系タグ(input/select/option/textarea/buttonタグ)と入力系属性の使い方

こじはなNote

selectタグとは

selectタグとはプルダウンメニューを定義できるタグです。
selectタグの選択肢を定義するoptionタグと一緒に使います。

<select required>
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    <option value="3">選択肢3</option>
</select>

【selectタグに関する記事】

selectタグ・optionタグ｜selectタグでプルダウンメニューを定義し、選択肢はoptionタグで定義

入力系タグ(input/select/option/textarea/buttonタグ)と入力系属性の使い方

こじはなNote

JS
イベントscroll｜スクロールしたとき

scrollイベントは、スクロールしたときのイベントです。

「Elementオブジェクト.addEventListener("scroll", function(){})」と書きます。

【 CSS 】


.scroll-box {
    width: 500px;
    height: 300px;
    background-color: aqua;
    /* はみ出す部分はスクロールさせる */
    overflow: scroll;
}

.scroll-box_child {
    width: 800px;
    height: 800px;
    background-color: beige;
}

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <h3>【windowのスクロール】
            <span id="w-scroll-x-txt">横:-</span>,
            <span id="w-scroll-y-txt">縦:-</span>
        </h3>
        <h3>【id"scroll01"のスクロール】
            <span id="scroll-x-txt">横:-</span>,
            <span id="scroll-y-txt">縦:-</span>
        </h3>
        <div id="scroll01" class="scroll-box">
            スクロールしてみて！
            <div class="scroll-box_child">
                子要素
            </div>
        </div>
    </body>
</html>

【 JavaScript 】


/*
 * 【window】
 */

// 横のスクロール位置の表示用
let w_scroll_x_txt = document.getElementById("w-scroll-x-txt");
// 縦のスクロール位置の表示用
let w_scroll_y_txt = document.getElementById("w-scroll-y-txt");

window.addEventListener("scroll", function() {

    // 横のスクロール位置取得
    let scroll_x = window.scrollX;
    w_scroll_x_txt.textContent = "横:" + scroll_x;

    // 縦のスクロール位置取得
    let scroll_y = window.scrollY;
    w_scroll_y_txt.textContent = "縦:" + scroll_y;
});

/*
 * 【idが"scroll01"の要素】
 */

// idが"scroll01"のDOM要素を取得
let scroll01 = document.getElementById("scroll01");

// 横のスクロール位置の表示用
let scroll_x_txt = document.getElementById("scroll-x-txt");
// 縦のスクロール位置の表示用
let scroll_y_txt = document.getElementById("scroll-y-txt");

scroll01.addEventListener("scroll", function() {

    // 横のスクロール位置取得
    let scroll_left = scroll01.scrollLeft;
    scroll_x_txt.textContent = "横:" + scroll_left;

    // 縦のスクロール位置取得
    let scroll_top = scroll01.scrollTop;
    scroll_y_txt.textContent = "縦:" + scroll_top;
});

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

Element/window(BOM)オブジェクトかで違う

スクロール位置取得のコードは、Elementオブジェクトか、window（BOM）オブジェクトかで違います。

Element	横の位置：Elementオブジェクト.scrollLeft 縦の位置：Elementオブジェクト.scrollTop
window(BOM)	横の位置：window.scrollX 縦の位置：window.scrollY

JS
イベントload｜ページや画像などの読み込みが完了したとき

loadイベントは、ページや画像などの読み込みが完了したときのイベントです。

「DOM.addEventListener("load", function(){})」と書きます。

ローディング画面をつくるのに使えるよ！

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <form method="get">
            <button type="submit">ページをリロード</button>
        </form>
        <h2 id="load-window-txt">ページはロード中です！</h2>
        <h2 id="load-img-txt">画像はロード中です！</h2>
        <img id="img01" alt="こじはなノートのロゴ">
    </body>
</html>

【 JavaScript 】


/*
 * 【window】
 */

// ロード状態のテキストの表示用
let load_w_txt = document.getElementById("load-window-txt");

window.addEventListener("load", function() {
    load_w_txt.textContent = "ページはロード完了！";
});

/*
 * 【idが"img01"のDOM要素】
 */

// idが"img01"のDOM要素を取得
let img01 = document.getElementById("img01");

// ロード状態のテキストの表示用
let load_img_txt = document.getElementById("load-img-txt");

// 画像の読み込みを意図的に2秒遅らせる
setTimeout(function () {
    img01.src = "https://cojihana-note.com/img/flower.png";
}, 2000);

img01.addEventListener("load", function() {
    load_img_txt.textContent = "画像はロード完了！";
});

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

JS
イベントresize｜ウィンドウサイズが変更されたとき

resizeイベントは、ウィンドウサイズが変更されたときのイベントです。

「DOM/BOMオブジェクト.addEventListener("resize", function(){})」と書きます。

【 HTML 】


<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
    </head>
    <body>
        <h1>Windowのサイズを変えてみて！</h1>
        <p>【windowのサイズ】<span id="w-w-txt">幅:-</span>,<span id="w-h-txt">高さ:-</span></p>
    </body>
</html>

【 JavaScript 】


// 画面幅のテキストの表示用
let w_w_txt = document.getElementById("w-w-txt");
// 画面高さのテキストの表示用
let w_h_txt = document.getElementById("w-h-txt");

window.addEventListener("resize", function() {

    let w_width = window.innerWidth;    // windowの幅を取得
    w_w_txt.textContent = "幅:" + w_width;

    let w_height = window.innerHeight;  // windowの高さを取得
    w_h_txt.textContent = "高さ:" + w_height;

});

ブラウザで実行するとこんな感じです。

実際に横の幅を拡大・縮小させてみてください！

まとめ

JavaScriptのイベントは、Webページ上で特定の何かが起こったときに処理を実行させることができる。
イベントはElementオブジェクト.addEventListener(イベント, function(){})と書く。
clickイベント要素がクリックされたときのイベント。
dblclickイベント：要素がダブルクリックされたときのイベント。
contextmenuイベント：右クリックメニューが開かれたときのイベント。
keydownイベント：キーが押されたときのイベント。
keyupイベント：キーが離されたときのイベント。
mousedownイベント：クリックボタンが押されたときのイベント。
mouseupイベント：クリックボタンが離されたときのイベント。
mousemoveイベント：カーソルが動いたときのイベント。
mouseenterイベント：カーソルが要素に入ったときのイベントで、子要素を出入りしても再発火しない。
mouseleaveイベント：カーソルが要素から出たときのイベントで、子要素を出入りしても再発火しない。
mouseoverイベント：カーソルが要素に乗ったときのイベントで、子要素を出入りすると再発火する。
mouseoutイベント：カーソルが要素から離れたときのイベントで、子要素を出入りすると再発火する。
submitイベント：フォームがsubmit(送信)されるときのイベント。
changeイベント：inputやselectなど入力系要素の入力値が変更されたときのイベントで、フォーカスが解除されたときにイベント発火する。
inputイベント：inputやselectなど入力系要素の入力フィールドの内容が変更されたときのイベントで、入力内容が変わるたびにリアルタイムでイベント発火する。
focusイベント：要素にフォーカスしたときのイベント。
blurイベント：要素からフォーカスが外れたときのイベント。
scrollイベント：スクロールしたときのイベント。
loadイベント：ページや画像などの読み込みが完了したときのイベント。
resizeイベント：ウィンドウサイズが変更されたときのイベント。

JavaScript

【 2025/06/14 00:00 更新】

こじはな

Webエンジニア3年目。

フロントからバックエンドまで幅広く経験や知識を発信します！

JavaScriptのイベント操作でよく使うイベント20選！使い方を解説！

JavaScriptのイベントって？

JavaScriptのイベントの書き方｜Elementオブジェクト.addEventListener(イベント, function(){})

JSイベントclick｜要素がクリックされたとき

JSイベントdblclick｜要素がダブルクリックされたとき

JSイベントcontextmenu｜右クリックメニューが開かれたとき

JSイベントkeydown｜キーが押されたとき

JSイベントkeyup｜キーが離されたとき

JSイベントmousedown｜クリックボタンが押されたとき

JSイベントmouseup｜クリックボタンが離されたとき

JSイベントmousemove｜カーソルが動いたとき

JSイベントmouseenter｜カーソルが要素に入ったとき

JSイベントmouseleave｜カーソルが要素から出たとき

JSイベントmouseover｜カーソルが要素に乗ったとき（子要素で再発火）

JSイベントmouseout｜カーソルが要素から離れたとき（子要素で再発火）

JSイベントsubmit｜フォームがsubmit(送信)されるとき

JSイベントchange｜入力系要素の入力値が変更されたとき

JSイベントinput｜入力フィールドの内容が変更されたとき（リアルタイム）

JSイベントfocus｜要素にフォーカスしたとき

JSイベントblur｜要素からフォーカスが外れたとき

JSイベントscroll｜スクロールしたとき

JSイベントload｜ページや画像などの読み込みが完了したとき

JSイベントresize｜ウィンドウサイズが変更されたとき

まとめ

JS
イベントclick｜要素がクリックされたとき

JS
イベントdblclick｜要素がダブルクリックされたとき

JS
イベントcontextmenu｜右クリックメニューが開かれたとき

JS
イベントkeydown｜キーが押されたとき

JS
イベントkeyup｜キーが離されたとき

JS
イベントmousedown｜クリックボタンが押されたとき

JS
イベントmouseup｜クリックボタンが離されたとき

JS
イベントmousemove｜カーソルが動いたとき

JS
イベントmouseenter｜カーソルが要素に入ったとき

JS
イベントmouseleave｜カーソルが要素から出たとき

JS
イベントmouseover｜カーソルが要素に乗ったとき（子要素で再発火）

JS
イベントmouseout｜カーソルが要素から離れたとき（子要素で再発火）

JS
イベントsubmit｜フォームがsubmit(送信)されるとき

JS
イベントchange｜入力系要素の入力値が変更されたとき

JS
イベントinput｜入力フィールドの内容が変更されたとき（リアルタイム）

JS
イベントfocus｜要素にフォーカスしたとき

JS
イベントblur｜要素からフォーカスが外れたとき

JS
イベントscroll｜スクロールしたとき

JS
イベントload｜ページや画像などの読み込みが完了したとき

JS
イベントresize｜ウィンドウサイズが変更されたとき