JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptである関数から別の関数へイベントオブジェクトを渡す方法

JavaScriptでは、イベントハンドラ内で取得したイベントオブジェクトを、そのまま引数として別の関数へ渡すことができます。イベントオブジェクトには発生元の要素(event.target)やイベントの種類などの情報が含まれているため、複数の関数で同じイベント情報を共有したい場合にとても便利です。

以下は、クリックイベントのイベントオブジェクトを受け渡し、ボタンのフォントサイズと文字色を変更するサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
</style>
</head>
<body>
<h1>Pass event objects from one function to another in JavaScript</h1>
<button class="Btn" onclick="changeFont(event)">CLICK HERE</button>
<h3>Click the above button to change its font size and color</h3>
<script>
   function changeFont(event) {
      event.target.style.fontSize = "32px";
      changeColor(event);
   }
   function changeColor(event) {
      event.target.style.color = "red";
   }
</script>
</body>
</html>

コードの解説

  • ボタンのonclick属性でchangeFont(event)を呼び出し、イベントオブジェクトを第一引数として受け取ります。
  • changeFont()の中では、event.targetによってクリックされたボタン要素にアクセスし、フォントサイズを32pxに変更します。
  • 続いて、同じイベントオブジェクトをそのままchangeColor(event)へ渡すことで、文字色を赤に変更します。

このように、イベントオブジェクトを引数として引き渡せば、別々の関数でも同じイベント情報を利用できる点がポイントです。

出力結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptである関数から別の関数へイベントオブジェクトを渡す方法

「CLICK HERE」ボタンをクリックすると、フォントサイズと文字色が次のように変化します。

JavaScriptである関数から別の関数へイベントオブジェクトを渡す方法

  1. 【Android】アクティビティ間でオブジェクトを受け渡す方法を徹底解説

    この記事では、Androidアプリ開発において、あるアクティビティ(Activity)から別のアクティビティへカスタムオブジェクトを受け渡す方法を、実際のコード例とともにステップ形式で解説します。実装のポイントオブジェクトをインテント(Intent)経由で受け渡すには、対象となるクラスにSerializableインターフェースを実装することが重要です。これにより、putExtra()メソッドでオブジェクトを渡し、getSerializableExtra()メソッドで受け取れるようになります。ステップ1:新規プロジェクトの作成Android Studioを起動し、「File」→「New Proj

  2. Androidでアクティビティ間を画像を受け渡す方法をわかりやすく解説

    はじめに 本記事では、Androidアプリであるアクティビティ(Activity)から別のアクティビティへ画像を受け渡す方法を解説します。ここでは、Intentに画像のリソースIDを格納して渡す、最もシンプルで確実な手法を紹介します。 手順1:新規プロジェクトの作成 Android Studioで新しいプロジェクトを作成します。メニューから「File」→「New Project」を選択し、必要事項をすべて入力してプロジェクトを作成しましょう。 手順2:activity_main.xml の編集 res/layout/activity_main.xml に以下のコードを追加します。「Send