关于鼠标事件和手机中的各个事件的几点总结

今天就来盘点一下鼠标的事件和手机触摸事件。

一、鼠标事件

1. onmousedown事件，当鼠标左键按下时触发。 如：当鼠标元素boxq1上按下时，改变它的背景颜色。

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°