HTMLからJavaScriptの処理を呼び出すのに「イベント」って言うのが必要って聞いたけど、なにこれ？
「イベント」は指定したタイミングでJavaScriptの処理を呼ぶための方法だよ。何かをきっかけにしてJavaScriptを呼ぶ時に必要だから、しっかり学んでいこう。
HTMLからJavaScriptの処理を呼び出すには「イベント」が必要！
「イベント」、「イベントリスナー」でイベント処理はなんとかなる！
- HTMLからJavaScriptの処理を呼び出す方法
- イベント、イベントリスナーについて
キーワード①：「イベント」はHTMLからJavaScriptの処理を呼ぶための合図
イベントは、HTML要素に対して何らかの操作が発生した時に、JavaScriptで実行される処理を呼び出すための合図です。
例えば、ボタン要素に「クリックイベント」を割り当てた場合、ユーザーがそのボタンをクリックすると「click」というイベントが発生します。
このようにユーザーがウェブページ上で何かをクリックしたり、テキストフィールドに文字を入力したりすると、そのアクションに対応する合図であるイベントが発生します。
イベントを使用することで、動きのあるウェブページにすることができ、見やすいページにすることができます。
とにかく合図ってことだね
そうそう。イベント＝合図。この合図が出たら、この処理をしてねっていう風に使われるよ。
さて、このイベントを理解するためには「イベントリスナー」という仕組みを知る必要があります。
キーワード②：JavaScriptの「イベントリスナー」＝合図を受け取る人
JavaScriptにおけるイベントリスナーは、特定の要素に対して発生するイベントを待ち受け、そのイベントが発生した時に指定した処理を実行する機能です。
つまり、合図を受け取って処理をする人です。
要素に対してイベントリスナーを設定することで、ユーザーの操作に応じてJavaScriptの処理を呼ぶことができます。
イベントリスナーは以下のように設定します。
element.addEventListener(eventType, callback);ここで element はイベントリスナーを設定する要素を指し、eventType は待ち受けるイベントの種類、callback はイベントが発生した際に実行する処理を指定します。
イベントリスナーを設定することで、指定した要素が指定したイベントを受け取った際に、指定した処理を実行するようになります。
要素に設定されたイベントリスナーは、イベント発生時に登録された順番に実行されます。
また、同じイベントに対して複数のイベントリスナーを登録することもできます。
イベントリスナーは、JavaScriptでアプリケーションの動的な変更を実現するために非常に重要な機能であり、WebページやWebアプリケーションの開発において欠かせないものとなっています。
なお、イベントリスナーがイベントを受け取るのを「リッスンする」とも言います。
イベントを受け取るのはイベントリスナーなのはわかったけど、イベントを発生させるのはどうしたらいいの？
JavaScriptのイベントを発火させる方法
JavaScriptにおいて、イベントを起こすことを「発火させる」と言います。
イベントを発火させるには以下の2つの方法があります。
アクションを起こす
なんらかのアクションを起こすことで、登録されたイベントが発火します。
例えば、ボタンをクリックすることでクリックイベントが発火します。
既にイベントリスナーの登録がされていれば、このイベントをリスナーが受け取り指定の処理を実行します。
最も基本的なイベントの考え方ですので、まずはこちらを覚えましょう。
任意の場所に「dispatchEvent」メソッドを記載する
Eventオブジェクトを作成し、dispatchEventメソッドを使って、イベントを強制的に発生させることができます。
以下は、ボタンがクリックされた時に「Hello, World!」とアラートを表示する例です。
// イベントオブジェクトを作成
var event = new Event('click');
// イベントを発生させる要素を取得
var button = document.getElementById('myButton');
// イベントを発生させる
button.dispatchEvent(event);このように、JavaScriptでは何らかのアクションをしなくても強制的にイベントを発火させることができます。
以下のコードは、要素のクリックイベントを受け取り、クリックされたときに実行される関数を定義する方法を示しています。
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});上記のコードでは、 addEventListener() メソッドを使用して、id属性が “myButton” の要素のクリックイベントを受け取っています。
次に、クリックされたときに実行される無名関数を定義し、 alert() 関数を使用してメッセージを表示します。
このように、イベントリスナーを使用することで、特定のイベントが発生したときに、任意のコードを実行できます。
ただし、イベントを発火させる際には、対象となる要素やイベントの種類、発生タイミングなどに注意して実装する必要があることを覚えておきましょう。
タイミングとかに注意しないとどうなるの？
変なタイミングで変な処理が起きるよ。ボタン押してないのに急に注意画面とか出たら怖いでしょ。
徒競走のイメージでわかるイベント処理
JavaScriptでよく使うイベント一覧
ここでは、よく使われるイベントを一覧でご紹介します。
特に、「click」、「submit」、「change」はWeb開発をする上で絶対目にするイベントなので、最低限この3つだけでも覚えましょう。
| イベント名 | 説明 | よくある使われ方 |
|---|---|---|
| click | 要素がクリックされたときに発生する | ボタンのクリック、リンクのクリックなど |
| submit | フォームが送信されたときに発生する | フォームの送信時に入力値をチェックするなど |
| change | 要素の値が変更されたときに発生する | フォームの入力欄の値が変更されたときにその値を処理するなど |
| keydown | キーボードのキーが押されたときに発生する | キーの入力を検知して入力制御をする、ショートカットキーを設定するなど |
| load | 要素が読み込まれたときに発生する | ページの読み込み後、最初に表示する場所を指定する |
| scroll | スクロールが発生したときに発生する | スクロール位置によって要素の表示を変更する |
| mouseover | マウスが要素に乗ったときに発生する | ツールチップの表示など、マウスオーバー時に要素の表示を変更する |
JavaScriptのイベントハンドラ＝1つのイベントだけのリスナー
ここまでイベントリスナーを主に説明しましたが、イベントを扱うのにイベントハンドラも覚えておきましょう。
JavaScriptイベントハンドラは、ブラウザ上で発生したイベントを処理するための関数のことで、イベントリスナーと大きく使い方は変わりません。
プログラミングをする上で最も大きな違いは直接HTMLに書けることで、イベントリスナーと比較して手軽であることが挙げられます。
イベントハンドラを使用することで、ボタンのクリック、マウスの移動、キーの押下など、ユーザーとのインタラクションに応じたアクションを起動することができます。
HTML要素の属性に直接記述する方法や、JavaScriptコード内で関数を定義して登録する方法があります。
代表的なイベントハンドラには、以下のようなものがあります。
| イベント名 | 説明 | よく使われる例 |
|---|---|---|
| onclick | 要素がクリックされたときに実行されるイベント | ボタン、リンク、画像などの要素のクリック時に処理を実行する |
| onmouseover | マウスが要素の上に乗ったときに実行されるイベント | ボタン、リンク、画像などの要素の上にマウスを乗せたときに処理を実行する |
| onmouseout | マウスが要素から外れたときに実行されるイベント | ボタン、リンク、画像などの要素からマウスが離れたときに処理を実行する |
| onkeydown | キーが押下されたときに実行されるイベント | フォームのテキスト入力欄にフォーカスが当たっているときに、ユーザーがキーを押下したときに処理を実行する |
| onsubmit | フォームが送信されたときに実行されるイベント | フォームの送信ボタンが押されたときに処理を実行する |
イベントハンドラは、関数として定義されることが多く、一度定義された関数は複数の要素に対して登録することができます。
また、イベントハンドラ内でJavaScriptを使用することもでき、イベントが発生した要素の情報を取得して、その情報を元に処理を行うことができます。
イベントハンドラの登録方法には、要素の属性に直接記述する方法や、JavaScriptコード内で関数を定義して登録する方法があります。
HTMLに直接書く場合は、以下のように書きます。
<button onclick="myFunction()">クリックしてください</button>イベントリスナーとイベントハンドラの使い分け
イベントリスナーとイベントハンドラは同じようなものに感じるけど、どう使い分けるの？
基本的にはイベントリスナーを使うといいよ。でも、最初は手軽なイベントハンドラを使って慣れるのもいいよ。
イベントリスナーとイベントハンドラは、共にJavaScriptにおいてイベント処理を行うために用いられる機能ですが、以下のように使い分けられます。
| メリット | デメリット | |
|---|---|---|
| イベントハンドラ | 直感的で分かりやすく、簡単にイベント処理を実装できる。 | イベントの登録や削除がしにくく、複数のイベント処理を設定することができない。 |
| イベントリスナー | 複数のイベント処理を設定でき、イベントの登録や削除が容易である。 | イベント処理が複雑になり、イベントハンドラに比べてコード量が増える場合がある。 |
一般的に、イベント処理が単純な場合や、イベントが動的に追加される場合はイベントハンドラを使用します。
複数のイベント処理が必要な場合や、イベントの登録・削除が頻繁に行われる場合はイベントリスナーを使用することが適しています。
イベントハンドラはイベントにつき1処理の時
イベントが発生した要素に直接イベントハンドラを設定する方法です。
HTML上に直接onclick属性として記述することができます。
<button onclick="alert('ボタンがクリックされました！')">クリック</button>メリット
直感的で分かりやすく、簡単にイベント処理を実装できる。
デメリット
デメリット：イベントの登録や削除がしにくく、複数のイベント処理を設定することができない。
イベントリスナーはイベントにつき複数処理の時
イベントリスナー addEventListener()メソッドを使用して、特定の要素に対して複数のイベント処理を登録できます。
また、一度登録したイベント処理を削除することもできます。
document.getElementById("myButton").addEventListener("click", function(){ alert("ボタンがクリックされました！"); }); メリット
複数のイベント処理を設定でき、イベントの登録や削除が容易である。
デメリット
イベント処理が複雑になり、イベントハンドラに比べてコード量が増える場合がある。
イベントハンドラは手軽で、イベントリスナーは融通が利く分ちょっと手軽さはないって感じ？
そんな感じ。
JavaScriptのイベントでよくある使い方
JavaScriptでボタンのクリックイベントを発生させる
ボタンクリックでJavaScriptを呼ぶのは最もよくある使い方のひとつ。基本になる動作と書き方なので、しっかり覚えましょう！
HTMLにonclickを記載するパターン
HTML上に「onclick」属性を使用してボタンにクリックイベントを追加することもできます。
以下はそのサンプルコードです。
<!DOCTYPE html>
<html>
<head>
<title>Click Event Example</title>
</head>
<body>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
alert("Hello World!");
}
</script>
</body>
</html>このコードでは、ボタンをクリックすると「Hello World!」というアラートが表示されます。
onclick属性には、クリック時に呼び出される関数名を指定します。
この例では、myFunction()関数が呼び出され、アラートが出力されます。
JavaScriptにイベントリスナーを記載するパターン
JavaScriptでボタンクリックイベントを発生させるには、以下の手順を実行します。
- ボタンのHTML要素を取得する。
- addEventListenerメソッドを使用して、クリックイベントをリッスンする。
- クリックされた際に実行するコードを指定する。
以下は、ボタンがクリックされた際にアラートダイアログを表示するサンプルコードです。
<!DOCTYPE html>
<html>
<head>
<title>Button Click Event Sample</title>
</head>
<body>
<button id="myButton">クリックしてください</button>
<script>
// 1. ボタンのHTML要素を取得する
const myButton = document.getElementById('myButton');
// 2. クリックイベントをリッスンする
myButton.addEventListener('click', function() {
// 3. クリックされた際に実行するコードを指定する
alert('ボタンがクリックされました！');
});
</script>
</body>
</html>上記のコードでは、ボタン要素を取得して、addEventListenerメソッドを使用して、クリックイベントをリッスンしています。
そして、クリックされた際にalert関数を使用してアラートダイアログを表示しています。
このように、JavaScriptを使用して、HTML要素のイベントをリッスンして、クリックされた際に任意の処理を実行することができます。
JavaScriptにonclickを記載するパターン
ボタンをクリックしたときに、アラートダイアログを表示するようなサンプルコードを作成します。
HTMLのボタンを用意します。
<button id="myButton">クリックしてください</button>JavaScriptで、このボタンをクリックしたときにアラートダイアログを表示するイベントハンドラーを設定します。
const myButton = document.getElementById("myButton");
myButton.onclick = function() {
alert("ボタンがクリックされました！");
};これで、ボタンをクリックしたときに「ボタンがクリックされました！」というアラートダイアログが表示されます。
onclickイベントハンドラーは、要素がクリックされたときに呼び出されます。要素のonclickプロパティに関数を代入することで、その要素にクリックイベントを設定することができます。
JavaScriptのラジオボタンを選択したイベントを発生させる
JavaScriptにイベントリスナーを記載するパターン
JavaScriptにおけるラジオボタン選択イベントは、ラジオボタンの選択状態が変更された際に発生します。選択されたラジオボタンの値を取得することができるため、フォームの内容をチェックする際によく使用されます。
以下は、ラジオボタンの選択状態が変更された際に選択されたラジオボタンの値を取得するサンプルコードです。
<!DOCTYPE html>
<html>
<head>
<title>ラジオボタン選択イベント</title>
</head>
<body>
<form>
<input type="radio" name="fruit" value="apple">りんご<br>
<input type="radio" name="fruit" value="orange">オレンジ<br>
<input type="radio" name="fruit" value="grape">ぶどう<br>
</form>
<script>
const radios = document.querySelectorAll('input[type=radio][name=fruit]');
radios.forEach(radio => {
radio.addEventListener('change', () => {
if (radio.checked) {
console.log(`選択されたラジオボタンの値は ${radio.value} です。`);
}
});
});
</script>
</body>
</html>上記のコードでは、3つのラジオボタンが表示されています。
それぞれのラジオボタンには、name属性にfruit、value属性にapple、orange、grapeが設定されています。
JavaScriptのquerySelectorAll()メソッドを使用して、3つのラジオボタンを取得し、forEach()メソッドで各ラジオボタンにchangeイベントを追加しています。
changeイベントが発生すると、選択されたラジオボタンのvalue属性の値がコンソールに表示されます。
HTMLにonclickを記載するパターン
ラジオボタンの選択イベントは、onclick イベントを使用しても実装できます。
ラジオボタンは同じ name 属性を持つグループで定義されるため、このグループ内で選択されたラジオボタンを確認する必要があります。
以下は、ラジオボタンの選択が変更されたときに、選択されたラジオボタンの値を console.log() に表示するサンプルコードです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ラジオボタンの選択イベント</title>
</head>
<body>
<input type="radio" id="option1" name="options" value="option1" onclick="radioButtonSelected()">
<label for="option1">オプション1</label><br>
<input type="radio" id="option2" name="options" value="option2" onclick="radioButtonSelected()">
<label for="option2">オプション2</label><br>
<input type="radio" id="option3" name="options" value="option3" onclick="radioButtonSelected()">
<label for="option3">オプション3</label><br>
<script>
function radioButtonSelected() {
var selectedOption = document.querySelector('input[name="options"]:checked').value;
console.log(selectedOption);
}
</script>
</body>
</html>上記のコードでは、3つのラジオボタンが同じ name 属性でグループ化され、それぞれ異なる id 属性と value 属性を持っています。
onclick イベントハンドラーを使用して、各ラジオボタンのクリックイベントが処理されます。
radioButtonSelected() 関数は、選択されたラジオボタンの値を取得し、console.log() に表示します。
JavaScriptの描画完了イベントを発生させる
JavaScriptにイベントリスナーを記載するパターン
JavaScriptには、ウェブページの描画が完了したことを示す「load」イベントがあります。このイベントは、すべての画像、スタイルシート、JavaScriptファイルなどのコンテンツが読み込まれ、描画が完了した後に発生します。
以下は、ページの読み込みが完了した後にアラートを表示するJavaScriptのサンプルコードです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Load Event Example</title>
</head>
<body>
<h1>JavaScript Load Event Example</h1>
<p>This is an example of how to use the load event in JavaScript.</p>
<script>
window.addEventListener("load", function() {
alert("ページの読み込みが完了しました！");
});
</script>
</body>
</html>このコードでは、windowオブジェクトのaddEventListenerメソッドを使用して、「load」イベントに対するリスナーを登録しています。
リスナーは、ページの読み込みが完了したときにアラートを表示するための関数です。
このように、JavaScriptを使用すると、ウェブページの読み込みが完了したことを検出することができます。
ページが完全に読み込まれた後に実行されるJavaScriptコードを作成する場合に非常に役立ちます。
JavaScriptにonclickを記載するパターン
JavaScript上でonloadイベントを使用するには、以下のように書きます。
<!DOCTYPE html>
<html>
<head>
<title>onload sample</title>
</head>
<body>
<h1>onload sample</h1>
<script>
window.onload = function() {
alert("ページの読み込みが完了しました！");
};
</script>
</body>
</html>このコードでは、ページの読み込みが完了した時点で、alertメッセージが表示されます。
windowオブジェクトのonloadプロパティに、関数を設定することで、ページの読み込み完了時にその関数が実行されます。
JavaScriptのイベント存在チェック
イベントが既に登録されているかどうかを確認する方法は、以下のようになります。
クリックイベントを例にしていますが、他のイベントに対しても同様の方法で確認することができます。
イベントリスナーの場合
要素に対してaddEventListener()メソッドを使用し、第二引数に指定した関数が既に登録されているかどうかを、第三引数にtrueまたはfalseを指定することで確認することができます。
const element = document.getElementById("target");
function listener() {
console.log("Event fired.");
}
// イベントリスナーを登録する
element.addEventListener("click", listener);
// イベントリスナーが登録されているかを確認する
const isRegistered = element.hasEventListener("click", listener, false);
console.log(isRegistered); // trueイベントハンドラの場合
イベントが発生した際に実行される関数を取得することはできませんが、代わりにonclickプロパティに値が設定されているかどうかをチェックすることができます。
const element = document.getElementById("target");
function handler() {
console.log("Event fired.");
}
// イベントハンドラを登録する
element.onclick = handler;
// イベントハンドラが登録されているかを確認する
const isRegistered = typeof element.onclick === "function";
console.log(isRegistered); // trueこのページではこれだけ覚える！
JavaScriptの処理を呼ぶにはイベントリスナー！
処理を呼ぶ時にはイベントリスナーを使って呼び出そう！
よし、わかった
今回のゼロわか
- HTMLからJavaScriptの処理を呼び出す方法
- イベントによって処理を呼び出すことができる
- イベントリスナー、イベントハンドラについて
- 基本的にはリスナー、手軽にしたい時はハンドラを使おう
お疲れさまでした。
今回は、HTMLからJavaScriptの処理を呼び出す方法についてお伝えしました。
わかドリはこれがすごく苦手でした…。今日も学んだあなたが偉い！
プログラミングをゼロから学ぶあなたはこちらから▼
