原生事件对象
2017-07-08 本文已影响0人
哈哈腾飞
事件对象：
每当触发事件时，就会产生一个事件对象（不管是DOM 0 还是DOM2 都有事件对象）[ 事件对象操作的都是DOM 0 和 DOM 2 在其他地方不管用（在标签中添加的事件调用事件对象是无效的） ]
下面是一个简单的dom能帮助我们更好的的理解事件对象：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0; margin:0;}
div{width: 100px; height: 100px; background-color: orange; position: absolute; left: 10px; top:30px; cursor: move;}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var div = document.querySelector("div");
var xArr = [10],yArr=[30];
div.onmousedown = function(e){
var e = e||window.event;
//获取鼠标到元素左边和上边的坐标
var disX = e.offsetX;
var disY = e.offsetY;
document.onmousemove = function(ev){
// e 事件对象做了兼容处理，怕有的浏览器不兼容，如：ie或低版本
var ev = ev||window.event;
var x = ev.clientX-disX;
var y = ev.clientY-disY;
xArr.push(x);
yArr.push(y);
div.style.left = x+"px";
div.style.top = y+"px";
}
}
var no =0;
div.onmouseup = function(){
document.onmousemove = null;
clearInterval(no);
no = setInterval(function(){
//数组方法：pop:从集合中把最后一个元素删除，并返回这个元素的值
div.style.left = xArr.pop()+"px";
div.style.top = yArr.pop()+"px";
},20);
if(xArr.length==0){
clearInterval(no);
return;
}
}
</script>
</body>
</html>
