JavaScript中的额事件一

JavaScript中的额事件一

获取鼠标点击之后的坐标;

   //获取鼠标的位置
   function getPosition(e){
        var x=e.clientX;  //直接这样获取得是：可视区域的
        var y=e.clientY;
        //还要考虑到非可视区的问题；
        var scrollTop=document.body.scrollTop   || document.documentElement.scrollTop;
        var scrollLeft=document.body.scrollLeft || document.documentElement.scrollLeft;
        x=x+scrollLeft;
        y=y+scrollTop;
        var obj={x:x,y:y};
        return obj;  
   }
   window.onload=function (){
      document.onclick=function (ev){
           var e =ev || event; //考虑到兼容性的问题;
           var obj=new getPosition(e);
           alert(obj.x+'--'+obj.y);
      }
   }

事件冒泡和取消事件冒泡

html：

    <div id="div1">
         <div id="div2">
             <div id="div3">
              </div>
          </div>
    </div>

css：

#div1{
height:100px; 
width:100px; 
padding:20px; 
background:yellow;    
}
#div2{
height:50px; 
width:50px; 
padding:20px; 
background:red;    
}
#div3{
height:40px; 
width:40px;  
background:green;    
}

javascript：

function getStyle(obj,name){
      if(obj.currentStyle!=undefined){
          return obj.currentStyle[name];
      }else{
         return  getComputedStyle(obj,false)[name];
      }
   }
   window.onload=function(){
      var objs=document.getElementsByTagName('div');
      var len=objs.length;
      for(var i=0;i<len;i++){
         objs[i].onclick=function (ev){
             var e=ev || event;
             alert(getStyle(this,'backgroundColor'));  //取出复合样式的时候，不能直接使用background
                                                      //而要使用backgroundColor
              e.cancelBubble=true;
              //这样就可以取消冒泡滴；//仅仅执行自己的事件，不管是否冒泡
         }
      }
      //结果会弹出 green red yellow //这样滴呀
      //google下面弹出的额rgb格式
   }

模仿一个select菜单；

   function show(ev){
       var e=ev ||event;
       var obj=document.getElementById("div1");
       obj.style.display='block';
       e.cancelBubble=true; //记住这里取消冒泡
   }
   
   window.onload=function (){
      document.onclick=function (ev){
            var e=ev || event;
            var obj=document.getElementById("div1");
            obj.style.display='none';
      }
   }

接下来做一个：更随鼠标移动的小实例；

html：

 <div></div> 
 <div></div> 
 <div></div> 
 <div></div> 
 <div></div> 
 <div></div> 
 <div></div> 
 <div></div> 
  <div></div> 
 <div></div> 
 <div></div> 
  <div></div> 
 <div></div> 
 <div></div> 

 

css：

div{
height:20px; 
width:20px;  
background:green;
margin-bottom:5px;    
position:absolute;
}

javascript：

 function getPosition(e){
        var x=e.clientX;  //直接这样获取得是：可视区域的
        var y=e.clientY;
        //还要考虑到非可视区的问题；
        var scrollTop=document.body.scrollTop   || document.documentElement.scrollTop;
        var scrollLeft=document.body.scrollLeft || document.documentElement.scrollLeft;
        x=x+scrollLeft;
        y=y+scrollTop;
        var obj={x:x,y:y};
        return obj;  
   }
   
   window.onload=function (){
      document.onmousemove=function(ev){
          var e=ev || event;
          var obj=getPosition(e);
          var objs=document.getElementsByTagName("div");
          var len=objs.length-1;
          for(var i=len;i>0;i--){
            objs[i].style.left=objs[i-1].offsetLeft+'px';
            //后面一个跟着前面的一个走；
            //所以的“走” 就是不断的改变left top 两个属性值滴呀；
            objs[i].style.top=objs[i-1].offsetTop+'px';  
          }
          objs[0].style.left=obj.x+'px';
          objs[0].style.top=obj.y+'px';
      }
   }

 

效果：

 

接下来就是我们的按钮事件的的；onkeydown keycode;

小实例：文本框只能输入数字； (也可以使用正则表达式)

 window.onload=function (){
    var obj=document.getElementById("txt");
    obj.onkeydown=function(ev){
      var e=ev || event;
      var keyCode=e.keyCode;
      if((keyCode<96 || keyCode>105) && (keyCode!=8) &&(keyCode!=37) && (keyCode!=39)){
         return false;//阻止默认事件滴呀  
      }else{
        
      }
    }
  }

方向键控制物体（div）的运动;

function move(val,direction){
      var obj=document.getElementById("move");
       if(direction=='x'){  
           obj.style.left=obj.offsetLeft+val+'px';
       }else if(direction=='y'){ //这样操作代码看起来要容易理解些
           obj.style.top=obj.offsetTop+val+'px';
       }else{
           //暂时没有设置物体运动的边界滴呀
       }
  }
 
 //键盘控制物体的运动  
 window.onload=function (){
     document.onkeydown=function (ev){
         var e=ev || event; //这样来控制键盘的移动
         var keyCode=e.keyCode;
         if(keyCode==37){ //左边移动
             move(-10,'x');   
         }else if(keyCode==39){ //右
             move(10,'x');
         }else if(keyCode==38){  //上
             move(-10,'y');              
         }else if(keyCode==40){  //下
             move(10,'y'); 
         }else{
             //不一定要看成左右，上下的运动；
             //在计算机中可以看成是x 轴和 y 轴上的运动滴呀
         }
     }
 }

但是，这里还有一个小问题，就是当连续的按你方向键的时候，会出现卡顿的现象滴呀；

解决方案：

 

组合键的使用；