javaScript的使用(5)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,Web,DOM事件)