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：

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

模仿一个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：

 

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.οnlοad=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.οnlοad=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 轴上的运动滴呀         }     } }

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

解决方案：

 

组合键的使用；