JSマウスイベント(マウスのクリック/リリースを監督し、マウスの移動/移動など)

3282 ワード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />

<title>Javascript   </title>

<head>
  <style type="text/css">
    body {background-color:#eeeeee}
    div.greenBtn
    {
      color:white;
      background-color:green;
      width:200px;
      height:20px;
      text-align:center;
      padding-top:20px;
      padding-bottom:20px;
    }
    button.greenBtn
    {
      color:white;
      background-color:green;
      width:200px;
      height:50px;
      text-align:center;
      border:0px;
    }
  </style>
</head>

<body onload="checkCookies()">  <!--          cookies    -->
  <h3>( )     HTML    </h3>
  <h4>1.    </h4>
  <p onclick="this.innerHTML = '  '">     </p>
  <h4>2.      </h4>
  <p onclick="changeText(this)">     </p>
  <script>
    function changeText(ele){
      ele.innerHTML = "  ";
    }
  </script>

  <script>
  function checkCookies(){
    if (navigator.cookieEnabled){
      // alert("    cookie")
    }else{
      // alert("    cookie")
    }
  }
  </script>

  <h3>( )onload   onunload   </h3>
  <p>
    onload   onunload                  。<br>
    onload                       ,                 。<br>
    onload   onunload         cookie
  </p>

  <h3>( )onchange  </h3>
  <p>       :<input type="text" onchange="toUpper(this)">
  <p>         ,                。</p>
  <script>
    function toUpper(ele){
      ele.value = ele.value.toUpperCase();
    }
  </script>

  <h3>( )onmouseover   onmouseout   </h3>
  <div class="greenBtn" onmouseover="mOver(this)" onmouseout="mOut(this)">
           
  </div>
  <script>
    function mOver(ele){
      ele.innerHTML = "  "
    }
    function mOut(ele){
      ele.innerHTML = "       "
    }
  </script>

  <h3>( )onmousedown、onmouseup    onclick   </h3>
  <button class = "greenBtn" onmousedown="mDown(this)" onmouseup="mUp(this)">    </button>
  <script>
    function mDown(ele){
      ele.innerHTML = "     "
      ele.style.backgroundColor = "blue"
    }
    function mUp(ele){
      ele.innerHTML = "    "
      ele.style.backgroundColor = "green"
    }
  </script>

  <h3>( )onfocus   </h3>
  <p>         ,      
    <input type="text"
    onfocus = "changeBgColor(this,true)"
    onblur="changeBgColor(this,false)">
  </p>
  <script>
    function changeBgColor(ele,hasFocus){
      if(hasFocus){
        ele.style.backgroundColor = "yellow"
      }else{
        ele.style.backgroundColor = "gray"
      }
    }
  </script>


</body>