Événements courants JavaScript

En plus de l'événement onclick que nous venons de mentionner, il existe également ces événements couramment utilisés :

onclick click
ondblclick double click
ondblclick double click
onfocus L'élément obtient le focus
onblur L'élément perd le focus
onmouseover La souris se déplace sur un élément
onmouseout La souris s'éloigne d'un élément
onmousedown Le bouton de la souris est enfoncé
onmouseup mouse La touche est relâchée
onkeydown Une touche du clavier est enfoncée
onkeyup Une certaine touche du clavier est relâchée

onkeypress Une touche du clavier est enfoncée et relâchée

Parmi eux, les événements onmouseover et onmouseout peuvent être utilisés pour déclencher des fonctions lorsque la souris survole et sort du HTML éléments. Par exemple, cet exemple :

<html>
<head></head>
<body>
<div style="background-color:green;width:200px;height:50px;margin:20px;padding-top:10px;color:#ffffff;font-weight:bold;font-size:18px;text-align:center;"
onmouseover="this.innerHTML='good'"
onmouseout="this.innerHTML='you have moved out'"
>move your mouse to here</div>
</body>
</html>

Lorsque la souris est déplacée vers l'intérieur, "bon" s'affiche, et lorsque la souris est déplacée vers l'extérieur, "vous avez déménagé" s'affiche :

onmousedown, onmouseup C'est l'événement d'appui et de relâchement de la souris. Premièrement, lorsque le bouton de la souris est cliqué, l'événement onmousedown est déclenché, et lorsque le bouton de la souris est relâché, l'événement onmouseup est déclenché. Par exemple :

<html>
<head>
  <script>
    function mDown(obj)    // 按下鼠标 的 事件处理程序
    {
    obj.style.backgroundColor="#1ec5e5";
    obj.innerHTML="release your mouse"
    }
    function mUp(obj)     // 松开鼠标 的 事件处理程序
    {
    obj.style.backgroundColor="green";
    obj.innerHTML="press here"
    }
  </script>
</head>
<body>
<div style="background-color:green;width:200px;height:35px;margin:20px;padding-top:20px;color:rgb(255,255,255);font-weight:bold;font-size:18px;text-align:center;"
onmousedown="mDown(this)"
onmouseup="mUp(this)"
>press here</div>
</body>
</html>

Les résultats en cours d'exécution sont visibles. Lorsque la souris est enfoncée, "relâchez votre souris" s'affiche et l'arrière-plan devient bleu une fois la souris relâchée, "appuyez ici" s'affiche et l'arrière-plan s'affiche. devient vert. <🎜><🎜><🎜><🎜>

Formation continue

nouveau fichier

<html> <head> <script> function mDown(obj) // 按下鼠标的事件处理程序 { obj.style.backgroundColor="#1ec5e5"; obj.innerHTML="release your mouse" } function mUp(obj) // 松开鼠标的事件处理程序 { obj.style.backgroundColor="green"; obj.innerHTML="press here" } </script> </head> <body> <div style="background-color:green;width:200px;height:35px;margin:20px;padding-top:20px;color:rgb(255,255,255);font-weight:bold;font-size:18px;text-align:center;" onmousedown="mDown(this)" onmouseup="mUp(this)" >press here</div> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Événements courants JavaScript

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]