JavaScript のイベント タイプ: 一般的なキーボード イベントとマウス イベント

JavaScript は、Web ページ上でユーザーのアクションと対話したりそれに応答したりできるようにする幅広いイベントを提供します。これらのイベントの中で、キーボードとマウスのイベントが最もよく使用されます。この記事では、JavaScript のさまざまな種類のキーボード イベントとマウス イベントを見て、それらの使用方法の例を見ていきます。

キーボードイベント

キーボード イベントは、キーを押す、キーを離す、文字を入力するなど、ユーザーがキーボードを操作するときに発生します。キーボード イベントを使用すると、ユーザーがフォームに何かを正しく入力したかどうかを確認したり、特定のキーが押されたときに何かが起こったかどうかを確認したりするなど、いくつかの素晴らしいことを行うことができます。あたかもウェブサイトがユーザーが押すキーを聞いていて、それに応じて反応するかのようです。 キーボード イベントは 3 つのタイプに分類されます:

<strong>キーダウン</strong>イベント

このキーボード イベントは、ユーザーがキーを押したときにトリガーされます。ユーザーがキーを押し続けると、キーが繰り返し起動されます。

このコードは、keydown イベントがどのように機能するかを示しています。イベント リスナーをドキュメント オブジェクトの keydown イベントに追加します。キーボードのキーが押されると、指定された機能が実行されます。この関数はメッセージをコンソールに記録します。メッセージには、文字列 Key Pressed is: と、その後に押されたキーを表す event.key の値が含まれます。

キーアップイベント

このキーボード イベントは、キーが放されたときに発生します。これは、ユーザーが特定のキーを放したときを検出するために使用できます。

上記のコードは、keyup イベントのイベント リスナーを追加し、キーボードのキーが放されたときに矢印関数が実行されるようにします。アロー関数は、event.key の値を、解放されたキーを表す name という名前の変数に割り当てます。キーを放すと、アラート ボックスが表示され、文字列 Key Pressed: を含むメッセージが表示され、その後に文字列補間 (${ name) を使用した name 変数の値が表示されます。 })。

keyup イベントのデモに使用できるもう 1 つの例は、入力フィールドを設定し、ユーザーがキーを放したときに入力フィールドに入力された文字を大文字に変換する関数を作成することです。以下の例を試すには、ID fname を持つ入力タグと onkeyup="myFunction()" のような入力タグを作成します。 input タグ内。

<strong>キープレス</strong> イベント

keypress イベントは、キーが押されるとトリガーされます。次のコード例では、キーが押されたときに関数を実行し、文字値を生成するイベント リスナーがドキュメント オブジェクトに追加されます。アロー関数は、文字列 Key Pressed: とその後に押されたキーの文字値を表す event.key の値を含むメッセージをブラウザのコンソールに記録します。 p> リーリー 警告する 一部のブラウザではキー イベントがサポートされなくなり、すべてのブラウザですべてのキー (Alt、Control、Shift、Esc など) がイベントをトリガーするわけではありません。代わりに keydown または keyup イベントを使用することをお勧めします。

キーボードイベントの使用例

マウスイベント

一方、マウス イベントは、より魅力的な Web サイトを作成するのに役立ちます。これらは、クリック、移動、スクロールなど、マウスが HTML ドキュメントと対話するときに発生するイベント を処理します。これらにより、ユーザーがマウス ボタンをクリックしたとき、要素上にマウスを移動したとき、または画面上の項目をドラッグしたときに反応できるようになります。あたかもウェブサイトがマウスの動きやクリックを追跡して、ユーザーが何をしたいのかを把握しているかのようです。マウス イベントにはさまざまな種類があります:

#クリック<strong>イベント</strong> このイベントは、

リーリー 上記のコードを実行するには、CSS クラス名

を使用して HTML にボタンを作成します。上記のコードは、querySelector メソッドを使用して、CSS クラス名 btn を持つ要素を選択し、それを element 変数に割り当てます。 click イベントをリッスンするイベント リスナーが要素に追加されました。この要素をクリックすると、指定された機能が実行されます。この例の機能は、要素の背景色を青に変更することです。 <p>您还可以构建一个简单的游戏，用户可以通过使用 <code>math.floor 和 math.random 方法生成随机颜色，在框内单击以连续更改框的背景颜色。

<strong>dbclick</strong> 事件

当用户用鼠标双击某个元素时，此事件调用一个函数。要执行下面的代码示例，请在 HTML 中创建一个 CSS 类名称为 btn 的按钮。使用 querySelector 方法获取元素并向其添加事件侦听器。双击该按钮时，将调用该函数，显示一条警报消息，并且按钮中文本的字体大小会增加。

var button = document.querySelector('.btn');
button.addEventListener('dblclick', function (event) {
  alert('Button double-clicked!');
  button.style.fontSize = '40px';
});

使用 dbclick 事件的高级方法是使用户能够编辑内容。例如，双击文本元素可以将其转换为可编辑的输入字段，允许用户直接进行更改。下面是使用 dbclick 事件编辑内容的演示。

<strong>mouseup</strong> 和 <strong>mousedown</strong> 事件

当用户将光标悬停在某个元素上并按下鼠标按钮时，会触发此 mousedown 事件。 创建一个 id 为 text 的按钮。当用鼠标单击该按钮时，会触发消息：“鼠标按钮已按下”。

var button = document.getElementById('text');
button.addEventListener('mousedown', function (event) {
  alert('Mouse button pressed!');
});

当用户单击某个元素后释放鼠标按钮时，会触发 mouseup 事件。创建一个 id 为 text 的按钮。当用鼠标单击按钮并释放时，会触发消息：“鼠标按钮已释放”。

var button = document.getElementById('text');
button.addEventListener('mouseup', function (event) {
  alert('Mouse button released!');
});

如何使用这些 mouseup 和 mousedown 事件的实际示例是在实现拖放功能以及绘图和草图时。

<strong>mouseover</strong> 和 <strong>mouseout</strong> 事件

当鼠标指针悬停在某个元素上时，会发生 mouseover 事件，而当鼠标指针离开该元素时，会发生 mouseout 事件。这是这两个鼠标事件的快速演示。

在上面的演示中，当用户的鼠标经过图像时，图像会放大，当鼠标离开图像时，图像会恢复到正常大小。

mouseover 事件可用于创建一个工具提示，当鼠标悬停在元素上时，该提示提供有关该元素的附加信息。 mouseover 和 mouseout 事件还可用于创建交互式导航菜单，其中当用户的鼠标指针悬停在菜单项上时会出现子菜单。

<strong>mousemove</strong> 和 <strong>mouseleave</strong> 事件

当用户将鼠标光标移动到某个元素上时，会触发 mousemove 事件，当鼠标光标离开该元素时，会触发 mouseleave 事件。这些事件使开发人员能够监视鼠标移动。

每当用户的鼠标位于 div 容器内时，上述代码都会获取鼠标指针坐标，并将坐标显示为框下方的文本。然后，在用户鼠标离开 div 元素后，它会显示文本，指示指针已离开 div。

结论

诸如 keydown、keyup 和 keypress 之类的键盘事件允许我们捕获并响应来自键盘的用户输入。无论您是实现表单验证、提供键盘快捷键还是创建基于文本的游戏，键盘事件对于用户交互都是至关重要的。另一方面，鼠标事件，如click、dblclick、mousedown、mouseup、mouseover、mouseout、mousemovephpcn endcphpcn 和 <code>mouseleave，允许我们捕获并响应用户与鼠标的交互。

要約すると、JavaScript のキーボードとマウスのイベントを使用すると、キーの押下とマウスの動きをキャプチャすることで、ユーザーのアクティビティをリッスンして応答しているように見える Web サイトを構築できます。さまざまな種類のキーボードとマウスのイベントと、それらを使用してインタラクティブな Web サイトや Web アプリケーションを構築する方法を理解したところで、楽しいインタラクティブなゲームや Web サイトを構築してみましょう。コーディングを楽しんでください!

以上がJavaScript のイベント タイプ: 一般的なキーボード イベントとマウス イベントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。