0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

イベント処理について簡潔にまとめます【初級編②】

Posted at

はじめに

今回は、JavaScriptのイベント処理について詳細をまとめていきます。JavaScriptのイベント処理は、ユーザーの操作やブラウザの動作に対して、特定のアクション(処理)を実行する仕組みを指します。

イベント処理の基本

イベントとは

特定の状況や操作が発生したことを示します。主なイベントには以下のようなものがあります。

click: // ユーザーが要素をクリックしたとき
mouseover: // ユーザーが要素にマウスカーソルを乗せたとき
keydown: // キーボードのキーが押されたとき
submit: // フォームが送信されたとき
load: // ページや画像が完全に読み込まれたとき

イベントリスナーとは

イベントが発生したときに実行される関数を「イベントリスナー」と呼びます。このリスナーは、特定の要素に「待ち構える」形で設定します。

イベント処理の構文

element.addEventListener('イベント名', 実行する関数); // イベントリスナーの設定

例1)ボタンをクリックしたときにメッセージを表示・非表示させる

See the Pen ボタンをクリックしたときにメッセージを表示・非表示させる by Uka Suzuki (@uukasuzuki_) on CodePen.

  • 初回クリックでmessage.textContentが空かどうかを確認し、空の場合はメッセージを表示します。

  • すでにメッセージが表示されている場合、クリックするとtextContentを空にして非表示にします。

例2)マウスオーバーで色を変える

See the Pen マウスオーバーで色を変える by Uka Suzuki (@uukasuzuki_) on CodePen.

div.addEventListener("mouseover", function () {
  div.style.backgroundColor = "lightgreen";
});
  • 上記は、addEventListenerメソッドを使って、mouseoverイベントを設定しています。加えて、mouseoverイベントは、マウスカーソルがdiv要素の上に乗ったときに発生します。

  • このイベントが発生した際、要素のstyle.backgroundColorプロパティをlightgreenに変更します。これにより、マウスが要素に乗った瞬間に、要素の背景色が緑色に変わります。

div.addEventListener("mouseout", function () {
  div.style.backgroundColor = "lightblue";
});
  • addEventListenerメソッドを使って、mouseoutイベントを設定しています。加えて、mouseoutイベントは、マウスカーソルがdiv要素から外れたときに発生します。

  • このイベントが発生した際、divの背景色をlightblueに戻します。これにより、マウスが要素から外れた瞬間に元の色(青)に戻ります。

イベントオブジェクトとは

document.addEventListener('click', function(event) {
  console.log('クリックされた要素:', event.target);
});

イベントが発生したとき、JavaScriptはイベントに関する詳細な情報を含む「イベントオブジェクト」を自動的に渡します。これを使うことで、クリックされた要素やキーボードの押されたキーなど、詳細な操作情報を取得できます。

まとめ

今回は、イベント処理の基本と具体例についてまとめました。次回は、これらを元にフォーム入力について考えていきます。

0
0
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?