js小知识

事件：JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。

主要事件表:

onmouseover与onmouseenter的区别：

onmousemove 事件在鼠标移动到 div 元素上时触发。
mouseenter 事件在鼠标指针进入 div 元素时触发，唯一的区别是 onmouseenter 事件不支持冒泡。
onmouseover 事件在鼠标指针进入 div 元素时触发 ,在子元素上也会触发(p 和 span)

onmouseout与onmouseleave的区别：

1、onmouseleave、onmouseenter，鼠标进入到指定元素区域内触发事件，不支持冒泡，不包含子元素的区域。

2、onmouseout、onmouseover、鼠标进入指定元素触发事件，含子元素区域。

判断鼠标的移动方向： 

鼠标拖动会有个事件 drag 或者老版本的mousemove，可以使用event对象的pageX,pageY 上次的坐标点和本次坐标点进行比较就可以判断鼠标拖动的方向了。

<script>
var lastX = null,
lastY = null;
window.onmousemove = function(event){
var curX = event.clientX,
curY = event.clientY,
direction = '';
// console.info(event);
// console.info(event.clientX);
// console.info(event.clientY);

// 初始化坐标
if(lastX == null || lastY == null){
lastX = curX;
lastY = curY;
return ;
}

if(curX > lastX){
direction += 'X右,';
}else if(curX < lastX){
direction += 'X左,';
}else{
direction += 'X居中,';
}

if(curY > lastY){
direction += 'Y上';
}else if(curY < lastY){
direction += 'Y下';
}else{
direction += 'Y居中';
}

lastX = curX;
lastY = curY;

console.info(direction);
document.body.innerText = direction;
}
</script>