标签：
今天就来盘点一下鼠标的事件和手机触摸事件。
一、鼠标事件
var box1 = document.getElementById("box1"); box1.onmousedown = function(){ box1.style.backgroundColor = ‘green‘; };
2. onmouseup事件，当鼠标左键抬起时触发。如：鼠标按下之前元素box1背景颜色为红色，当按下之后变为绿色，放开之后又变为红色。
var box1 = document.getElementById("box1"); box1.onmousedown = function(){ box1.style.backgroundColor = ‘green‘; }; box1.onmouseup = function(){ box1.style.backgroundColor = ‘red‘; };
3. onmousemove事件，当鼠标在元素上移动时触发。如：鼠标在元素box1上移动时，控制台输出鼠标的位置。
box1.onmousemove = function(e){ var x = e.pageX; var y = e.pageY; console.log(‘鼠标横坐标为：‘+x+‘******鼠标纵坐标为：‘+y); };
4. onmouseenter事件，当鼠标进入元素的瞬间触发，仅在鼠标进入元素时触发。如：鼠标在进入元素box1时，元素背景颜色改为绿色。
它与onmousedown事件区别在于：后者是再按下的瞬间触发，而前者是在进入元素瞬间才触发，也就是说鼠标在元素边界上才触发。
var box1 = document.getElementById("box1"); box1.onmouseenter = function(){ box1.style.backgroundColor = ‘green‘; };
5. onmouseleave事件，当鼠标移出元素的瞬间触发，仅在鼠标移出元素时触发，发生在元素边界。如：鼠标在进入元素box1时，背景颜色改为绿色，移出元素后又变为红色。
var box1 = document.getElementById("box1"); box1.onmouseenter = function(){ box1.style.backgroundColor = ‘green‘; }; box1.onmouseleave = function(){ box1.style.backgroundColor = ‘red‘; };
6. onmouseover事件，当鼠标在元素之上的时候触发，只要鼠标留在元素之上就会触发，仅触发一次，不管鼠标是否移动，这是它和onmousemove的区别。如：鼠标在元素box1上时一直在控制台输入数字一。
box1.onmouseover = function(){ console.log(new Date()); };
7. onmouseout事件，当鼠标离开目标元素是触发，效果和原理与mouseleave没有什么区别，只是在Firefox下没有onmouseenter和onmouseleave，只能使用onmouseover和onmouseout；而在IE中便可使用onmouseennter和onmouseleave来代替前两个。
二、手机触摸事件
1. ontouchstart事件，触摸开始事件，当手机屏幕被触摸的瞬间触发。如：当触摸手机的瞬间输出当前触摸的位置坐标。
var box1 = document.getElementById("box1"); box1.ontouchstart = function(e){ var touch = e.touches[0]; var x = Number(touch.clientX); var y = Number(touch.clientY); console.log("当前触摸点的横坐标"+x+"*****当前触摸点的纵坐标"+y); };
2. ontouchmove事件，触摸的整个过程触发，当手指在屏幕上移动的时候触发。如：当手指在屏幕上移动的时候获取当前触摸位置。
var box1 = document.getElementById("box1"); box1.ontouchmove = function(e){ var touch = e.touches[0]; var x = Number(touch.clientX); var y = Number(touch.clientY); console.log("当前触摸点的横坐标"+x+"*****当前触摸点的纵坐标"+y); };
3. ontouchend事件，触摸结束的瞬间触发，即当手指离开屏幕时触发。如：当手指离开屏幕时，改变元素的背景颜色。
var box1 = document.getElementById("box1"); box1.ontouchstart = function(e){ var touch = e.touches[0]; box1.style.backgroundColor = ‘green‘; };
4. ontouchcancel事件，触摸过程被系统取消时触发，当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。
注意事项：
手机触摸事件获得焦点区别：
原生写法：
var e = window.event;
var touchs = e.touches[0];
var startX = Number(touchs.pageX);
jQuery写法:
var e = window.event;
var touchs = e.originalEvent.targetTouches[0];//获得第一个触点
var startX = Number(touchs.pageX);
三、手机手势事件
1. ongesturechange事件，必须是多点触摸才可触发事件，比如手机中的旋转、缩放等操作。如：
var div = document.getElementById("div"); div.ongesturechange = function(e){ //scale代表手势产生的缩放比例，小于1是缩小，大于1是放大，原始为1 var scale = e.scale; //rotation代表旋转手势的角度，值区间[0,360]，正值顺时针旋转，负值逆时针 var angle = e.rotation; };
四、重力感应事件
1. 重力感应事件其实是利用了window.orientation事件，通过判断手机是横屏还是竖屏来实现重力感应效果。只需要为body节点添加onorientationchange事件即可。在此事件中由window.orientation属性得到代表当前手机方向的数值。window.orientation的值列表如下：
0：与页面首次加载时的方向一致
-90：相对原始方向顺时针转了90°
180：转了180°
90：逆时针转了90°
标签：
原文地址：http://www.cnblogs.com/foolisher/p/5412723.html
