Maison >interface Web >js tutoriel >Code de cas pour la capture d'événements en js

Code de cas pour la capture d'événements en js

不言original: 2018-08-29 16:30:321555parcourir

Le contenu de cet article concerne le code de cas de capture d'événement en js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1.Type d'événement
Onclick signifie qu'il est déclenché lorsque la souris clique
Ondblclick signifie qu'il est déclenché lorsque la souris est double-cliquée
; Onmouseover signifie qu'il est déclenché lorsque la souris entre ;
onmouseout signifie qu'il est déclenché lorsque la souris sort ;
2 Écrivez un cas et un code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title><style type="text/css">
    *{margin:0;padding:0;list-style:none;}
    #myul{
             width:500px;
             margin:100px auto;
          }
    #myul li{
              width:500px;
              height:30px;
              line-height:30px;
              text-align:center;
              background:#ccc;
              border:1px solid #000;
              }
    </style>
    </head>
    <body>
    <ul id="myul">
        <li id="li01">单击</li>
        <li id="li02">双击</li>
        <li id="li03">鼠标移入</li>
        <li id="li04">鼠标移出</li>
        <li>打酱油滴</li>
    </ul></body></html><script type="text/javascript">
    var li01 = document.getElementById(&#39;li01&#39;);
    li01.onclick = function(){
        alert(&#39;单击事件被捕获&#39;);
    }    var li02 = document.getElementById(&#39;li02&#39;);
    li02.ondblclick = function(){
        alert(&#39;双击事件被捕获&#39;);
    }    var li03 = document.getElementById(&#39;li03&#39;);
    li03.onmouseover = function(){
        alert(&#39;鼠标移入被捕获&#39;);
    }    var li04 = document.getElementById(&#39;li04&#39;);
    li04.onmouseout = function(){
        alert(&#39;鼠标移出被捕获&#39;);
    }
      </script>

Affichez les résultats
. Code de cas pour la capture dévénements en js
3.1 Cliquez sur la première colonne du tableau et "Cliquez sur l'événement capturé" apparaîtra

3.2 Double-cliquez sur la deuxième colonne du tableau et "Double-cliquez sur l'événement capturé" apparaîtra

3.3 Lorsque la souris est déplacée dans la troisième colonne du tableau, "L'événement de déplacement de la souris est capturé" apparaîtra
Code de cas pour la capture dévénements en js
3.4 Lorsque la souris est déplacée hors de la quatrième colonne du tableau, « Événement de sortie de souris capturé » apparaîtra

Recommandations associées :

Résumé et cas de fonctions mathématiques en js Introduction

Comprendre l'analyse détaillée du mécanisme d'événement JavaScript

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Résumé de la façon de créer des objets en JavaScript (super classique)Article suivant：Résumé de la façon de créer des objets en JavaScript (super classique)

Code de cas pour la capture d'événements en js

Articles Liés