事件分类:
鼠标事件:
click ,mousedown,mousemove,mouseup,contextmenu,mouseover,mouseup,mouseenter,mouseleave
click = mousedown + mouseup
移动小方块简单
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="width:200px;height:200px;background-color: red;position:absolute;left:0px;top:0px"></div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
function drag(elemt) {
elemt.onmousedown = function (e)
{
console.log(e)
var disX = e.pageX - parseInt(elemt.style.left);
var disY = e.pageY - parseInt(elemt.style.top);
document.onmousemove = function (e) {
var event = e || window.event;
console.log(e.pageX,e.pageY);
elemt.style.left = e.pageX -disX + 'px';
elemt.style.top = e.pageY -disY + 'px';
}
document.onmouseup = function (e)
{
document.onmousemove = null
}
}
}
drag(div);
</script>
</body>
</html>
想了解关于js的event对象,可以参考 http://www.cnblogs.com/zxktxj/archive/2012/02/26/2369176.html
键盘事件
keydown ,keyup,keypress
keydown>keypress>keyup
keydown和keypress的区别
keydown可以响应任意键盘按键,keypress只可以响应字符类的按键
keypress 返回ASCll码,可以转换成相应的字符
文本操作事件
input ,focus ,blur,change
窗体操作事件
scroll load