Code de cas pour la capture d'événements en js-js tutoriel-php.cn

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

不言

Libérer： 2018-08-29 16:30:32

original

1563 Les gens l'ont consulté

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>

Copier après la connexion

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