js의 이벤트 캡처를 위한 케이스 코드-JS 튜토리얼-php.cn

js의 이벤트 캡처를 위한 케이스 코드

不言

풀어 주다： 2018-08-29 16:30:32

원래의

1514명이 탐색했습니다.

이 기사는 js의 이벤트 캡처에 대한 사례 코드를 제공합니다. 특정 참조 값이 있으므로 도움이 될 수 있습니다.

1. 이벤트 유형
Onclick은 마우스를 클릭할 때 트리거된다는 의미입니다.
Ondblclick은 마우스를 두 번 클릭할 때 트리거된다는 의미입니다.
Onmouseover는 마우스가 안으로 움직일 때 트리거됨을 의미합니다.
onmouseout은 마우스가 밖으로 움직일 때 트리거됨을 의미합니다.
2. 케이스 및 코드 작성

<!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>

로그인 후 복사

3. 결과 표시 #🎜 🎜# #🎜 🎜#
3.1 표의 첫 번째 열을 클릭하면 "클릭 이벤트가 캡처되었습니다"라는 메시지가 나타납니다. js의 이벤트 캡처를 위한 케이스 코드

3.2 표의 두 번째 열을 두 번 클릭하면 "두 번 클릭 이벤트 캡처됨"이 나타납니다.

3.3 마우스를 표의 세 번째 열로 이동하면 "마우스 이동 이벤트가 캡처되었습니다"라는 메시지가 나타납니다. js의 이벤트 캡처를 위한 케이스 코드

3.4 표의 네 번째 열 밖으로 마우스를 이동하면 "마우스 아웃 이벤트 캡처됨" 팝업이 나타납니다.

관련 권장 사항: