JavaScriptで使用されるaddEventListenerメソッドは、様々なイベントをリッスンすることができます。以下に一般的なイベントのリストを示します。
addEventListenerメソッドとは？
addEventListenerメソッドは、JavaScriptで要素に対してイベントリスナーを追加するためのメソッドです。このメソッドを使用することで、要素が特定のイベントを受け取ったときに実行される関数を定義することができます。
addEventListenerメソッドは以下のような構文を持ちます。
element.addEventListener(event, function, useCapture);ここで、引数の意味は以下の通りです。
element: イベントをリッスンする要素を指定します。
event: リッスンするイベントの種類を指定します。例えば、clickやkeydownなどのイベント名を指定します。
function: イベントが発生したときに実行する関数を指定します。この関数は、イベントオブジェクトを受け取ることができます。
useCapture (オプション): イベントの伝搬において、キャプチャフェーズでイベントをリッスンするかどうかを指定します。trueを指定するとキャプチャフェーズでリッスンし、falseを指定するとバブリングフェーズでリッスンします。デフォルトはfalseです。
addEventListenerメソッドを使用することで、JavaScriptで要素に対して様々なイベントをリッスンし、動的な操作を実現することができます。
click
clickイベント – クリックされたとき
要素がクリックされたときに発生します。ボタン、リンク、画像などに使用されます。
const element = document.getElementById("my-element");
element.addEventListener("click", function() {
console.log("Clicked!");
});keyup
keyupイベント – キーボードのキーが押されたとき
キーボードのキーが離されたときに発生します。テキスト入力フィールドなどで使用されます。
const element = document.getElementById("my-element");
element.addEventListener("keyup", function(event) {
console.log("Keyup: " + event.key);
});keydown
keydownイベント – キーボードのキーが押されたとき
キーボードのキーが押されたときに発生します。テキスト入力フィールドなどで使用されます。
const element = document.getElementById("my-element");
element.addEventListener("keydown", function(event) {
console.log("Keydown: " + event.key);
});load
[rml_read_more]
loadイベント – ページや画像などが読み込まれたとき
要素が読み込まれたときに発生します。ページや画像などのリソースの読み込みが完了した後に実行されます。
window.addEventListener("load", function() {
console.log("Page loaded!");
});submit
submitイベント – フォームが送信されたとき
フォームが送信されたときに発生します。送信ボタンがクリックされたときに実行されます。
const form = document.getElementById("my-form");
form.addEventListener("submit", function(event) {
event.preventDefault(); // デフォルトのイベントをキャンセルする
console.log("Form submitted!");
});mouseover
mouseoverイベント – 要素にマウスカーソルが重なったとき
要素にマウスカーソルが重なったときに発生します。ツールチップなどで使用されます。
const element = document.getElementById("my-element");
element.addEventListener("mouseover", function() {
console.log("Mouse over!");
});resize
resizeイベント – ウィンドウのサイズが変更されたとき
ウィンドウのサイズが変更されたときに発生します。レスポンシブデザインなどで使用されます。
window.addEventListener("resize", function() {
console.log("Window resized!");
});scroll
scrollイベント – スクロールされたとき
要素がスクロールされたときに発生します。スクロールバーなどで使用されます。
const element = document.getElementById("my-element");
element.addEventListener("scroll", function() {
console.log("Scrolled!");
});focus
focusイベント – 要素にフォーカスが当てられたとき
要素にフォーカスが当てられたときに発生します。テキスト入力フィールドやボタンなどで使用されます。
const input = document.getElementById("my-input");
input.addEventListener("focus", function() {
console.log("Input is focused!");
});blur
blurイベント – 要素からフォーカスが外れたとき
要素からフォーカスが外れたときに発生します。テキスト入力フィールドなどで使用されます。
const input = document.getElementById("my-input");
input.addEventListener("blur", function() {
console.log("Input is blurred!");
});change
changeイベント – フォームの値が変更されたとき
フォームの値が変更されたときに発生します。チェックボックスやラジオボタンなどで使用されます。
const checkbox = document.getElementById("my-checkbox");
checkbox.addEventListener("change", function() {
if (checkbox.checked) {
console.log("Checkbox is checked!");
} else {
console.log("Checkbox is unchecked!");
}
});まとめ
これらのイベントは、addEventListenerメソッドを使用して要素にイベントリスナーを追加することで、JavaScriptでリッスンすることができます。
実際に何らかの処理を行うには、それぞれのイベントに対して処理を追加する必要があります。
