Dom事件02

来源:互联网 发布:linux系统分区详解 编辑:程序博客网 时间:2024/05/22 17:21
<!DOCTYPE html>
<html>
  <head>
    <title>dom事件03.html</title>
 
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
     <script type="text/javascript">
 
     //onload 当页面加载完成时触发
 
 </script>
  </head>
  <body  onload="alert('welcome!')">
  <input type="text" id="one" />
  </body>
</html>



<------------------------------鼠标事件---------------------------------------->
<!DOCTYPE html>
<html>
  <head>
    <title>dom事件04.html</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <style type="text/css" >
 div {
 border: 1px red solid;
 height: 300px;
 width:300px;
}
 
</style>
 </head>
      <body >
 
  <div id="one">
 
  </div>
  </body>
     <script type="text/javascript">
 /*
     onmousedown 鼠标按键被按下
     onmouseup  鼠标按键被松开
   
     onmouseseout 鼠标从某元素移开
     onmouseover   鼠标移到某元素之上
   
     onmousemove  鼠标被移动 */
    var one = document.getElementById("one");
  /*  one.onmousedown = function(event){
   alert(event.button);  //返回值:(左键)0  (中键) 1 (右键) 2
  }   */
 /*  one.onmouseout = function(event){
   alert("onmouseout");
  }
  one.onmouseover = function(event){
   alert("onmouseover");
  }  */
 /*  one.onmousemove = function(event){
   alert("onmousemove")
  } */
  one.onmousemove = function(event){
   alert(event.clientX+"==>"+event.clientY);
  }                     //获得鼠标的坐标
 </script>
</html>







原创粉丝点击