Types d'événements en JavaScript : événements courants du clavier et de la souris

JavaScript fournit un large éventail d'événements qui vous permettent d'interagir et de répondre aux actions des utilisateurs sur les pages Web. Parmi ces événements, les événements clavier et souris sont les plus couramment utilisés. Dans cet article, nous examinerons les différents types d'événements de clavier et de souris en JavaScript et verrons des exemples de leur utilisation.

Événements clavier

Les événements de clavier se produisent lorsque l'utilisateur interagit avec le clavier, par exemple en appuyant sur une touche, en la relâchant ou en tapant un caractère. Les événements de clavier nous permettent de faire des choses intéressantes, comme vérifier si l'utilisateur a saisi correctement quelque chose dans un formulaire ou si quelque chose se produit lorsqu'une touche spécifique est enfoncée. C'est comme si le site Web écoutait les touches sur lesquelles vous appuyez et réagissait en conséquence. Les événements de clavier sont divisés en trois types :

<strong>keydown</strong> Événements

Cet événement clavier est déclenché lorsque l'utilisateur appuie sur une touche. Si l'utilisateur maintient une touche enfoncée, celle-ci se déclenchera à plusieurs reprises.

document.addEventListener('keydown', function(event) {
  console.log('Key pressed is:', event.key);
});

Ce code démontre la valeur de keydown 事件的工作原理。它向文档对象的 keydown 事件添加一个事件侦听器。当按下键盘上的某个键时，将执行指定的功能。此函数将消息记录到控制台。该消息包含字符串 Key Pressed is:，后跟 event.key qui représente la touche enfoncée.

keyup Événements

Cet événement clavier se produit lorsqu'une touche est relâchée. Il peut être utilisé pour détecter le moment où l'utilisateur relâche une clé spécifique.

document.addEventListener('keyup', (event) => {
    var name = event.key;
    alert(`Key pressed: ${name}`);
}, false);

Le code ci-dessus ajoute un écouteur d'événement pour l'événement keyup 事件添加了一个事件监听器，这样当键盘上松开某个键时，就会执行一个箭头功能。该箭头函数将 event.key 的值赋给名为 name 的变量，它代表释放的密钥。释放按键时会出现一个警告框，并显示一条消息，其中包含字符串 Key Pressed:，后跟使用字符串插值的 name 变量的值 (${name} afin que lorsqu'une touche est relâchée sur le clavier, une fonction de flèche soit exécutée. La fonction flèche attribue la valeur de event.key à une variable nommée name, qui représente la clé libérée. Lorsque la touche est relâchée, une boîte d'alerte apparaît avec un message contenant la chaîne

Key Pressed:

, suivie de la valeur de la variable name par interpolation de chaîne (${name} ). <code>keyup 事件的另一个示例是设置一个输入字段并创建一个函数，当用户释放按键时，该函数将输入字段中键入的字符转换为大写。要尝试下面的示例，请创建一个 id 为 fname 的输入标记和一个类似 onkeyup="myFunction()" Un autre exemple où peut être utilisé pour démontrer l'événement consiste à configurer un champ de saisie et à créer une fonction qui convertit les caractères saisis dans le champ de saisie en majuscules lorsque l'utilisateur relâche la touche. Pour essayer l'exemple ci-dessous, créez une balise d'entrée avec l'identifiant fname

et une balise d'entrée comme <strong>keypress</strong>

onkeyup="myFunction()"

keypress 事件。在下面的代码示例中，事件侦听器被添加到文档对象中，该事件侦听器在按下按键并生成字符值时执行函数。箭头函数将一条消息记录到浏览器的控制台，其中包含字符串 Key Pressed:，后跟 event.key à l'intérieur de la balise d'entrée .

function myFunction() {
  let x = document.getElementById("fname"); 
  x.value = x.value.toUpperCase();
}

Événementkeypress

L'événement keypress est déclenché lorsqu'une touche est enfoncée. Dans l'exemple de code suivant, un écouteur d'événements est ajouté à l'objet document qui exécute une fonction lorsqu'une touche est enfoncée et génère une valeur de caractère. La fonction flèche enregistre un message sur la console du navigateur contenant la chaîne , suivie de la valeur de event.key, qui représente la valeur de caractère de la touche enfoncée.

p>

document.addEventListener('keypress', (event) => {
    console.log('Key pressed:', event.key);
});

avertir Certains navigateurs ne prennent plus en charge l'événement de clé et toutes les touches (telles que Alt, Control, Shift ou Esc) ne déclenchent pas l'événement dans tous les navigateurs. Il est recommandé d'utiliser plutôt les événements keydown ou keyup.

Exemple d'utilisation des événements de clavier

<strong>点击</strong>

Événements souris

D'un autre côté, les événements de souris peuvent vous aider à créer un site Web plus attractif. Ils gèrent les événements

qui se produisent lorsque la souris interagit avec un document HTML, comme un clic, un déplacement ou un défilement. Ils nous permettent de réagir lorsque l'utilisateur clique sur un bouton de la souris, déplace la souris sur un élément ou fait glisser un élément sur l'écran. C'est comme si le site Web suivait les mouvements et les clics de votre souris pour déterminer ce que vous voulez faire. Il existe de nombreux types d'événements de souris :

btn 的按钮。上面的代码使用 querySelector 方法选择 CSS 类名为 btn 的元素，并将其分配给 element 变量。侦听 clickÉvénement

Cliquez🎜🎜 🎜Cet événement est exécuté lorsque 🎜l'utilisateur clique sur un élément. 🎜🎜

var element = document.querySelector('.btn');
element.addEventListener('click', function () {
  element.style.backgroundColor = 'blue';
});

🎜Pour exécuter le code ci-dessus, créez un écouteur d'événement en HTML avec un nom de classe CSS. 🎜Event a été ajouté à l'élément. Lorsque cet élément est cliqué, la fonction spécifiée sera exécutée. La fonction dans cet exemple est de changer la couleur d'arrière-plan de l'élément en bleu. 🎜

您还可以构建一个简单的游戏，用户可以通过使用 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，允许我们捕获并响应用户与鼠标的交互。

En résumé, les événements de clavier et de souris de JavaScript nous permettent de créer des sites Web qui semblent écouter et répondre à l'activité des utilisateurs en capturant les pressions sur les touches et les mouvements de la souris. Maintenant que vous comprenez les différents types d'événements de clavier et de souris et comment les utiliser pour créer des sites Web et des applications Web interactifs, allez-y et créez des jeux et des sites Web interactifs amusants. Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!