Case code for event capture in js-JS Tutorial-php.cn

Case code for event capture in js

不言

Release： 2018-08-29 16:30:32

Original

1558 people have browsed it

The content of this article is about the case code of event capture in js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Event type
Onclick means it is triggered when the mouse clicks;
Ondblclick means it is triggered when the mouse double-clicks;
Onmouseover means it is triggered when the mouse moves in;
onmouseout means it is triggered when the mouse moves out;
2. Write a case and 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>

Copy after login

3. Display the results
Case code for event capture in js
3.1 Click the first column in the table, and "Click event is captured" will pop up

3.2 Double-click the second column in the table, and "Double-click event captured" will pop up

3.3 When the mouse moves into the third column of the table, "Mouse move event is captured" will pop up
Case code for event capture in js
3.4 When the mouse is moved out of the fourth column of the table, "Mouse out event captured" will pop up

Related recommendations: Summary and cases of mathematical functions in js

Introduction

Detailed analysis of understanding JavaScript event mechanism

The above is the detailed content of Case code for event capture in js. For more information, please follow other related articles on the PHP Chinese website!