javaScriptの使用(5)DOM事件

2447 ワード

JavaScript Web DOM事件

dom事件
ブラウザは、特定の条件やユーザの行動を待ち受け、それぞれの操作をトリガします.
一般的なdomイベントは以下の通りです.
onclick:イベントをクリックします.
onfocus:フォーカスイベント
onblur:焦点を失う事件
onkeydown:キーボードでイベントを押す
onload:ページ完了ロードイベント
onmouseover:マウスストップイベント
onmouseout:マウス除去イベント

<html>
 <head>
  <title>dom  </title>
  <script type="text/javascript">
    function clickMe(){
       alert('  ');
       alert('haha');
    }
    function clearUsername(){
      var username=document.getElementById("username");
      username.value="";
    }
    function clearUsernameByThis(my){
         my.value="";
    }
    function setMessage(my){
        var val=my.value;
        if(val==''){
            my.value="      ";
        }
    }
    function count(my){
      var cou=document.getElementById("cou");
      cou.value=my.value.length;
    }
    function bodyload(){
      var mydiv=document.getElementById("mydiv");
      mydiv.style.backgroundColor="red";
    }
  </script>
 </head>
 <body    <input type="button" value="   "  />
   <br />
   <div id="mydiv"    <br />
   <a href="#"  >
     a  </a>
   <br>
   <a href="javascript:alert('xyz')" >
     a  </a>
   <br>
      ：
   <input type="text" name="username" value="      " onfocus="alert(this.value)" />
   <br/>
   <input type="text" id="username" name="username" value="      " onfocus="clearUsernameByThis(this)" onblur="setMessage(this)" />
   <br/>
      ：<input type="text" onkeydown="count(this)">&nbsp;<input type="text" id="cou" />
 </body>
</html>

<html>
<head>
  <title>DOM  </title>
  <script type="text/javascript">
   function changeToRed(){
    var mydiv=document.getElementById("mydiv");
    mydiv.style.backgroundColor="red";
    }
    function changeToBlue(){
      var mydiv=document.getElementById("mydiv");
      mydiv.style.backgroundColor="blue";
    }
  </script>
 </head>
 <body>
  <div id="mydiv"            
  </div>
 </body>
</html>

javascriptでバッファ運動を実現します.