JavaScript 入力値の変更
この短いチュートリアルでは、JavaScript での addEventListener の使用について説明します。
JavaScript の input イベント
input イベントは、次の種類の HTML 要素に関連付けられています。
- 入力タイプ - テキストフィールド、ラジオ、チェックボックス
- テキストエリアタイプ
- ドロップダウンまたはタイプを選択
そのような要素の値が変更されるたびに、input イベントが発生します。 input イベントと change イベントには大きな違いがあり、input イベントは要素の値が変更されるたびにトリガーされますが、change イベントは要素がフォーカスを失った場合にのみ発生します。
さらに、入力エリア要素とテキストエリア要素に関連付けられたイベント インターフェイスは InputEvenet です。 他の要素タイプの場合、それは一般的な Event インターフェイスになります。
JavaScript イベント リスナーを使用した入力イベント
ユーザーの操作により、ターゲットでイベントが発生する場合があります。 Web API を使用すると、ターゲット要素で発生した特定のイベントで関数が呼び出されるイベント リスナーを登録できます。
以下は、input タイプのイベントのイベント リスナーを登録するための基本的な構文です。
構文：
addEventListener(event_type, listener);
event_type パラメータは、文字列表現としてのイベント タイプです。 このシナリオでは、イベント タイプは input になります。
listener は、イベントが発生したときに呼び出される JavaScript 関数です。 この関数またはオブジェクトは、指定されたイベントがトリガーされるとすぐに通知を受け取ります。
以下に示すように、入力要素と段落要素を含む単純な HTML ページを作成してみましょう。
コード - HTML:
<html>
<head>
</head>
<body>
<input placeholder="your name" name="name"/>
<p id="nameList"></p>
<script type="text/javascript" src="inputev.js"></script>
</body>
</html>
また、inputev.js JavaScript ファイルを HTML ページにリンクしました。 JavaScript ロジックを使用して、input 要素のイベント リスナーを登録してみましょう。
コード - inputev.js:
// make the link to the element objects
const inputField = document.querySelector('input');
const displayAreaField = document.getElementById('nameList');
// adding the event listener for input event type
inputField.addEventListener('input', addNames);
// addNames is the function to be called
function addNames(inputevent) {
displayAreaField.textContent = inputevent.target.value;
}
上記の例のように、入力フィールドのイベント リスナーを登録し、イベントが発生したときに呼び出される関数を渡しました。 この場合、コールバック関数は addNames です。
サンプル コードを実行すると、入力した文字がテキスト フィールドの下に表示されます。
前述の input イベントとイベント リスナーの手法は、高度にインタラクティブなアプリケーションで Web API が提供する便利な機能です。
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.