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';
      }
   }

 

效果:

JavaScript中的额事件一_第1张图片

 

接下来就是我们的按钮事件的的;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 轴上的运动滴呀
         }
     }
 }

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

解决方案:

 

组合键的使用;

 

你可能感兴趣的:(JavaScript中的额事件一)