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 轴上的运动滴呀
}
}
}

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

解决方案：

组合键的使用；