一、UI事件
load 当页面完全加载后在window上触发图片也可以触发load事件
resize 当窗口大小变化时在window上触发
scroll 当用户滚动带滚动条的元素中的内容时,在该元素上面触发
二、鼠标事件
1、事件类型
onclick 单击
ondblclick 双击
oncontextmenu 右键菜单
onmouseover 移入
onmouseout 移出
onmouseenter 移入
onmouseleave 移出
onmousedown 按下
onmouseup 抬起
onmousemove 移动
使用enter和leave 是因为 over和out 在进入、移出子级时会触发
代码
这种的是不适合的!!!!
window.onkeydown = function(e){
var l = dOk.offsetLeft;
var t = dOk.offsetTop;
if(e.keyCode === 37){
l-=5;
}else if(e.keyCode === 38){
t-=5;
}else if(e.keyCode === 39){
l+=5;
}else if(e.keyCode === 40){
t+=5;
}
dOk.style.left = l +"px";
dOk.style.top = t+"px";
}
合适的代码如下:
//合适的打开方式 计时器+状态
var isLeft = false;
var isTop = false;
var isRight = false;
var isBottom = false;
//计时器
var timer = null;
//键盘事件:只修改状态
window.onkeydown = function(e){
if(e.keyCode === 37){
isLeft = true;
}else if(e.keyCode === 38){
isTop = true;
}else if(e.keyCode === 39){
isRight = true;
}else if(e.keyCode === 40){
isBottom = true;
}
}
window.onkeyup = function(e){
if(e.keyCode === 37){
isLeft = false;
}else if(e.keyCode === 38){
isTop = false;
}else if(e.keyCode === 39){
isRight = false;
}else if(e.keyCode === 40){
isBottom = false;
}
}
//通过计时器实现移动
timer = setInterval(function(){
var l =dOk.offsetLeft;
var t =dOk.offsetTop;
if(isLeft){ l-=5;}
if(isTop){ t-=5;}
if(isRight){ l+=5;}
if(isBottom){ t+=5;}
dOk.style.left = l +"px";
dOk.style.top = t+"px";
},30)
2、坐标位置
相对于Body: clientX 表示事件发生时鼠标指针在视口中的水平坐标
clientY 在视口中的垂直坐标
三、键盘事件
keydown 当用户按下键盘上的任意键时触发,按住不动将重新触发
keyup 当用户释放键盘上的键时触发
event.keyCode 键码