JavaScript のイベントを深く理解する
この記事では、イベント ハンドラー、イベント リスナー、およびイベント オブジェクトについて説明します。また、イベントを処理する 3 つの異なる方法と、最も一般的な方法のいくつかについても説明します。イベントを理解することで、よりインタラクティブな Web エクスペリエンスをユーザーに提供できるようになります。
イベントはブラウザ内で発生する操作であり、ユーザーまたはブラウザ自体によって開始できます。 Web サイトで発生する一般的なイベントをいくつか紹介します。
ページの読み込みが完了しました
ユーザーがボタンをクリックしました
##ユーザーがドロップダウン リストの上にマウスを移動します- ユーザーがフォームを送信
- ##ユーザーがキーボードのキーを押す
- イベントで実行される JavaScript 応答をエンコードすることにより、開発者はユーザーへのメッセージの表示、データの検証、ボタンのクリックへの反応、その他多くのアクションの実行が可能になります。
ユーザーがボタンをクリックするかキーを押すと、イベントがトリガーされます。これらはそれぞれクリック イベントまたはキー イベントと呼ばれます。
イベント ハンドラーは、イベントがトリガーされたときに実行される JavaScript 関数です。 イベント リスナーは応答インターフェイス要素にアタッチされ、特定の要素が特定のイベントの発生を待機して「リッスン」できるようになります。 イベントを要素に割り当てる方法は 3 つあります。 インライン イベント ハンドラー- イベント ハンドラーのプロパティ
- イベント リスナー
# これら 3 つの方法を詳しく説明して、イベントをトリガーする各方法をよく理解してから、説明します。各方法の詳細、長所と短所。
インライン イベント ハンドラーのプロパティ
イベント ハンドラーについて学習し始めるために、まずインライン イベント ハンドラーについて考えます。 button 要素と p 要素で構成される非常に基本的な例から始めましょう。ユーザーにボタンをクリックして p のテキスト内容を変更してもらいたいと考えています。
ボタンのある HTML ページから始めましょう。後でコードを追加する JavaScript ファイルを参照します。 <!DOCTYPE html>
<html>
<head>
<title>Events</title></head>
<body>
<!-- Add button -->
<button>Click me</button>
<p>Try to change me.</p>
</body>
<!-- Reference JavaScript file -->
<script src="js/events.js"></script>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Events</title></head>
<body>
<button onclick="changeText()">Click me</button>
<p>Try to change me.</p>
</body>
<script src="js/events.js"></script>
</html>events.js ファイルを作成しましょう。このファイルは、ここの js/ ディレクトリにあります。その中で、p 要素の textContent を変更する changeText() 関数を作成します。
// Function to modify the text content of the paragraph
const changeText = () = >{
const p = document.querySelector('p');
p.textContent = "I changed because of an inline event handler.";
}初めて events.html をロードすると、次のようなページが表示されます:
ただし、自分または別のユーザーがクリックすると、ボタンをクリックすると、p タグのテキストが Try to change me から に変わります。インラインイベントハンドラーのため変更しました。
インライン イベント ハンドラーを HTML 要素のインライン CSS スタイルと比較できます。個別のクラス スタイルシートを維持することは、各要素にインライン スタイルを作成するよりも実用的です。これは、各要素にハンドラーを追加するのではなく、個別のスクリプト ファイルを通じて完全に処理される JavaScript を維持するのと同様です。
イベント ハンドラーのプロパティ
イベント ハンドラーのインライン化の次の手順は、イベント ハンドラーのプロパティです。これはインライン ハンドラーに非常に似ていますが、要素の属性を HTML ではなく JavaScript で設定する点が異なります。
ここでの設定は同じですが、onclick="changeText()":… < body >
<button > Click me < /button>
<p>I will change.</p >
</body>
…/
// Function to modify the text content of the paragraph
const changeText = () = >{
const p = document.querySelector('p');
p.textContent = "I changed because of an event handler property.";
}
// Add event handler as a property of the button element
const button = document.querySelector('button');
button.onclick = changeText;注: イベント ハンドラーは、ほとんどの JavaScript コードが従うキャメルケース規則に従いません。コードは onclick ではなく onclick であることに注意してください。
初めて Web ページを読み込むと、ブラウザに次の内容が表示されます。
このボタンをクリックすると、同様の効果が得られます。 :
事件处理程序属性的可维护性略好于内联处理程序，但它仍然存在一些相同的障碍。例如，尝试设置多个单独的onclick属性将导致覆盖除最后一个外的所有属性，如下所示。
const p = document.querySelector('p');
const button = document.querySelector('button');
const changeText = () = >{
p.textContent = "Will I change?";
}
const alertText = () = >{
alert('Will I alert?');
}
// Events can be overwritten
button.onclick = changeText;
button.onclick = alertText;在上面的例子中，单击按钮只会显示一个警告，而不会更改p文本，因为alert()代码是最后添加到属性的代码。
了解了内联事件处理程序和事件处理程序属性之后，让我们转向事件侦听器。
事件监听器
JavaScript事件处理程序的最新添加是事件侦听器。事件侦听器监视元素上的事件。我们将使用addEventListener()方法侦听事件，而不是直接将事件分配给元素上的属性。
addEventListener()接受两个强制参数——要侦听的事件和侦听器回调函数。
事件监听器的HTML与前面的示例相同。
… < button > Click me < /button>
<p>I will change.</p > …我们仍然将使用与以前相同的changeText()函数。我们将把addEventListener()方法附加到按钮上。
// Function to modify the text content of the paragraph
const changeText = () = >{
const p = document.querySelector('p');
p.textContent = "I changed because of an event listener.";
}
// Listen for click event
const button = document.querySelector('button');
button.addEventListener('click', changeText);注意，对于前两个方法，click事件被称为onclick，但是对于事件监听器，它被称为click。每个事件监听器都会从单词中删除这个词。在下一节中，我们将查看更多其他类型事件的示例。
当您用上面的JavaScript代码重新加载页面时，您将收到以下输出:
初看起来，事件监听器看起来与事件处理程序属性非常相似，但它们有一些优点。我们可以在同一个元素上设置多个事件侦听器，如下例所示。
const p = document.querySelector('p');
const button = document.querySelector('button');
const changeText = () = >{
p.textContent = "Will I change?";
}
const alertText = () = >{
alert('Will I alert?');
}
// Multiple listeners can be added to the same event and element
button.addEventListener('click', changeText);
button.addEventListener('click', alertText);在本例中，这两个事件都将触发，一旦单击退出警告，就向用户提供一个警告和修改后的文本。
通常，将使用匿名函数而不是事件侦听器上的函数引用。匿名函数是没有命名的函数。
// An anonymous function on an event listener
button.addEventListener('click', () = >{
p.textContent = "Will I change?";
});还可以使用removeEventListener()函数从元素中删除一个或所有事件。
// Remove alert function from button element button.removeEventListener('click', alertText);
此外，您可以在文档和窗口对象上使用addEventListener()。
事件监听器是当前在JavaScript中处理事件的最常见和首选的方法。
常见的事件
我们已经了解了使用click事件的内联事件处理程序、事件处理程序属性和事件侦听器，但是JavaScript中还有更多的事件。下面我们将讨论一些最常见的事件。
鼠标事件
鼠标事件是最常用的事件之一。它们指的是涉及单击鼠标上的按钮或悬停并移动鼠标指针的事件。这些事件还对应于触摸设备上的等效操作。
| 事件 | 描述 |
|---|---|
| click | 当鼠标被按下并释放到元素上时触发 |
| dblclick | 当元素被单击两次时触发 |
| mouseenter | 当指针进入元素时触发 |
| mouseleave | 当指针离开一个元素时触发 |
| mousemove | 每当指针在元素中移动时触发 |
Click は複合イベントであり、マウスダウン イベントとマウスアップ イベントの組み合わせで構成され、マウス ボタンが押されるか上げられるとそれぞれトリガーされます。
mouseenter と Mouseleave を同時に使用して、マウス ポインターが要素上にある限り持続するホバー効果を作成します。
フォーム イベント
フォーム イベントは、どの入力要素が選択されているか選択解除されているか、どのフォームが送信されているかなど、フォーム関連のアクションです。
| フォームの送信時に発生します | |
| 要素 (入力など) がフォーカスを受け取ったときに発生します | |
| 要素のタイミング フォーカスが失われたときにトリガーされます |
JavaScript は、フォームを送信したり、バックエンド言語に値を送信したりするためによく使用されます。 JavaScript を使用してフォームを送信する利点は、フォームの送信にページをリロードする必要がないこと、および必須の入力フィールドを JavaScript を使用して検証できることです。
キーボード イベントキーボード イベントは、キーを押す、キーを上げる、キーを押し続けるなどのキーボード操作を処理するために使用されます。
##keydown | |
|---|---|
| keyup | |
| keypress | |
| 見た目は似ていますが、keydown イベントと keypress イベントは、まったく同じキーすべてにアクセスするわけではありません。 keydown は押された各キーを認識しますが、keypress は SHIFT、ALT、DELETE などの文字を生成しないキーを省略します。 |
イベント オブジェクトと呼ばれるパラメータをイベント リスナーに渡すと、発生したアクションに関する詳細情報にアクセスできます。キーボード オブジェクトに関連する 3 つのプロパティには、keyCode、key、code が含まれます。
たとえば、ユーザーがキーボードの文字キーを押すと、そのキーに関連する次のプロパティが表示されます:
プロパティ| Example | keyCode | |
|---|---|---|
| 65 | key | |
| a | code# を表します | ##押された物理キーを示します|
