Types d'événements en JavaScript : événements courants du clavier et de la souris-js tutoriel-php.cn

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 :

`keydown`É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); });

Copier après la connexion

Ce code démontre la valeur dekeydown事件的工作原理。它向文档对象的keydown事件添加一个事件侦听器。当按下键盘上的某个键时，将执行指定的功能。此函数将消息记录到控制台。该消息包含字符串Key Pressed is:，后跟event.keyqui 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);

Copier après la connexion

Le code ci-dessus ajoute un écouteur d'événement pour l'événementkeyup事件添加了一个事件监听器，这样当键盘上松开某个键时，就会执行一个箭头功能。该箭头函数将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 deevent.keyà une variable nomméename, 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 variablenamepar interpolation de chaîne (${name}< / code> ). keyup事件的另一个示例是设置一个输入字段并创建一个函数，当用户释放按键时，该函数将输入字段中键入的字符转换为大写。要尝试下面的示例，请创建一个 id 为fname的输入标记和一个类似onkeyup="myFunction()"Un autre exemple oùpeut être utilisé pour démontrer l'événement < 的函数/strong> 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'identifiantfname


       et une balise d'entrée commekeypress
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(); }
        
         Copier après la connexion
        
       
       Événementkeypress
L'événementkeypressest 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îneKey Pressed:, suivie de la valeur deevent.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); });
         
          Copier après la connexion
         
        
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
点击
Événements sourisD'un autre côté, les événements de souris peuvent vous aider à créer un site Web plus attractif. Ilsgè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
CliquezCet é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'; });
         
          Copier après la connexion
         
        
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方法生成随机颜色，在框内单击以连续更改框的背景颜色。
dbclick事件
当用户用鼠标双击某个元素时，此事件调用一个函数。要执行下面的代码示例，请在 HTML 中创建一个 CSS 类名称为btn的按钮。使用querySelector方法获取元素并向其添加事件侦听器。双击该按钮时，将调用该函数，显示一条警报消息，并且按钮中文本的字体大小会增加。
        
         var button = document.querySelector('.btn'); button.addEventListener('dblclick', function (event) { alert('Button double-clicked!'); button.style.fontSize = '40px'; });
         
          Copier après la connexion
         
        
使用dbclick事件的高级方法是使用户能够编辑内容。例如，双击文本元素可以将其转换为可编辑的输入字段，允许用户直接进行更改。下面是使用dbclick事件编辑内容的演示。
mouseup和mousedown事件
当用户将光标悬停在某个元素上并按下鼠标按钮时，会触发此mousedown事件。创建一个 id 为text的按钮。当用鼠标单击该按钮时，会触发消息：“鼠标按钮已按下”。
        
         var button = document.getElementById('text'); button.addEventListener('mousedown', function (event) { alert('Mouse button pressed!'); });
         
          Copier après la connexion
         
        
当用户单击某个元素后释放鼠标按钮时，会触发mouseup事件。创建一个 id 为text的按钮。当用鼠标单击按钮并释放时，会触发消息：“鼠标按钮已释放”。
        
         var button = document.getElementById('text'); button.addEventListener('mouseup', function (event) { alert('Mouse button released!'); });
         
          Copier après la connexion
         
        
如何使用这些mouseup和mousedown事件的实际示例是在实现拖放功能以及绘图和草图时。
mouseover和mouseout事件
当鼠标指针悬停在某个元素上时，会发生mouseover事件，而当鼠标指针离开该元素时，会发生mouseout事件。这是这两个鼠标事件的快速演示。
在上面的演示中，当用户的鼠标经过图像时，图像会放大，当鼠标离开图像时，图像会恢复到正常大小。
mouseover事件可用于创建一个工具提示，当鼠标悬停在元素上时，该提示提供有关该元素的附加信息。mouseover和mouseout事件还可用于创建交互式导航菜单，其中当用户的鼠标指针悬停在菜单项上时会出现子菜单。
mousemove和mouseleave事件
当用户将鼠标光标移动到某个元素上时，会触发mousemove事件，当鼠标光标离开该元素时，会触发mouseleave事件。这些事件使开发人员能够监视鼠标移动。
每当用户的鼠标位于div容器内时，上述代码都会获取鼠标指针坐标，并将坐标显示为框下方的文本。然后，在用户鼠标离开div元素后，它会显示文本，指示指针已离开 div。
结论
诸如keydown、keyup和keypress之类的键盘事件允许我们捕获并响应来自键盘的用户输入。无论您是实现表单验证、提供键盘快捷键还是创建基于文本的游戏，键盘事件对于用户交互都是至关重要的。另一方面，鼠标事件，如click、dblclick、mousedown、mouseup、mouseover、mouseout、mousemovephpcn endcphpcn 和 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!