#JavaScript # javascript DOM0和DOM2事件

什么是事件

事件是元素天生具备的行为方式（和写不写JS代码没有关系），当我们去操作元素的时候会触发元素 的很多事件。

事件绑定

1.什么是事件绑定

给当前元素的某一个事件绑定方法，目的是为了让当前元素某个事件被触发时，可以做一些事情。

2.事件绑定方法

给某一个元素绑定事件，目前常用的有两种方式：

a)DOM0级事件绑定

oBox.onclick = function(){}

b)DOM2级事件绑定

oBox.addEventListener('click',function(){},false) //标准浏览器  **不兼容IE6~8**
oBox.attachEvent('click',function(){})  //IE6~8中使用的DOM2绑定方式

PC端常用事件

1.表单元素常用事件

blur: 失去焦点事件

focus: 获取焦点事件

change: 内容发生变化事件

select: 被选中事件

2.键盘事件

keydown: 键盘按下的事件

keyup: 键盘抬起事件

keypress: 键盘按下后就有keypress（中文输入法状态下，会触发keydown，因为没有把内容出发到输入框中）

3.鼠标事件

click：点击，不管是单击还是双击都会触发click事件

dbclick：双击。300MS之内连续触发2次点击事件。

mouseover: 鼠标滑过

mouseout ：鼠标离开

mouseenter：鼠标进入

mouseleave：鼠标离开

mousemove：鼠标移动

mousedown：鼠标左键按下

mouseup: 鼠标左键抬起

mousewheel: 鼠标滚轮滚动

4.其他事件

load：加载成功

error：加载失败

scroll：滚轮滚动事件

resize：大小改变事件 window.onresize当浏览器窗口的大小发生改变触发这个事件

beforeonload：关闭浏览器窗口之前触发事件

移动端常用事件

移动端的键盘一般都是虚拟键盘，虽然部分手机存在keydown/keyup事件但是兼容不好，所以我们想用键盘事件的时候，使用input事件代替

oBox.oninput= function(){}

移动端没有鼠标，所以鼠标类的事件在移动端兼容都特别的差（mousexxx,这些事件不要在移动端使用了）。

移动端的大部分操作是靠手指完成的，移动端有手指事件：

单手指事件：

touchstart:手指按下
touchmove:手指移动
touchend:手指离开
touchcancel: 意外事件导致的手指离开（手机没电等）

多手指事件：

gesturestart
gesturechange
gestureend

移动端还有很多操作是基于手机硬件完成的，例如：手机传感器、陀螺仪、重力感应器等

在移动端兼容click事件。pc端的click是点击，但是移动端把click事件当作单击。移动端使用click事件处理点击操作存在300MS延迟.

事件对象

oBox.onclick = function(e){

//=>arguments[0] === e:当方法执行的时候，浏览器默认传递给方法的参数值（事件对象）

}//事件绑定：给oBox的click事件，基于DOM0级事件绑定的方式，绑定了一个方法,以后当我们手动触发oBox的click行为的时候，会把绑定的方法执行。

当元素的某一个事件行为被触发，不仅会把之前绑定的方法执行，而且还会给当前绑定的方法传递一个值（浏览器默认传递的），我们把传递的这个值称为 事件对象 ：

1.因为这个值是对象数据类型的值，里面存储了很多的属性和方法

2.这个对象中存储的值都是当前操作的一些基本信息，例如：鼠标的位置、触发的行为类型、触发的事件源等

以上两条都是针对标准浏览器IE6~8下不是这样的机制。

IE6~8下方法被触发执行的时候，浏览器并没有把事件对象当作值传递给函数。e在IE6~8下是undefined。但是IE6~8下也有事件对象，事件对象需要我们通过window.event单独获取。

oBox.onclick = function(e){
    //以后想要获取事件对象需要下面这样写，先验证是否传递e，没有传递到window上去找即可
    e = e || window.event
    console.log(window.event)
}

事件对象是为了记录当前本次操作的基本信息的，所以只和本次操作有关。本次操作，页面中不管通过什么方式获取的e或者window.event（也不管在哪里获取）他们存储的基本信息应该是相同。

鼠标事件对象 MouseEvent 和 兼容处理

clientX/clientY:当前鼠标触发点距离 当前窗口 左上角的X/Y轴的坐标

pageX/pageY: 当前鼠标触发点距离BODY左上角的X/Y轴坐标（页面第一屏左上角），但是IE6~8中没有这两个属性。

type：当前触发事件类型

target：事件源，当前鼠标操作的是哪个元素，则事件源就是谁。IE6~8下没有target属性，它有srcElement这个属性代表事件源。

preventDefault:此行为是为了阻止事件的默认行为，IE6~8下没有这个方法，需要使用e.returnValue = false来处理。

stopPropagation:此方法是为了阻止事件的冒泡传播，IE6~8下不兼容，需要使用e.cancelBubble=true来处理

//IE6~8下处理pageX/pageY兼容
oBox.onclick = function(e){
    if(typeof e=== 'undefined'){
        //IE6~8
        e = window.event;
        
        //pageX/pageY兼容 e.clientX+浏览器卷去的值
        e.pageX = e.clientX + (document.documentElement.scrollLeft||document.body.scrollLeft);
        e.pageY = e.clientY + (document.documentElement.scrollTop||document.body.scrollTop);
       
        //target兼容处理
        e.target = e.srcElement;
        
        //preventDefault兼容处理
        e.preventDefault = function(){
            e.returnValue = false
        }
        
        //stopPropagation兼容处理
        e.stopPropagation = function(){
            e.cancelBubble=true
        }
        
    }
   
    //下面在使用属性和方法的时候，完全按照标准浏览器的语法实现即可（IE6~8下不兼容的属性和方法已经重写了兼容处理）
}

上面的兼容处理方式属于比较完整的，但是如果项目中我们只想用到某一个不兼容的属性，我们没必要写这么多，简单处理一下就可以了

oBox.onclick = function(e){
    e = e || window.event;
    e.target = e.target||e.srcElement;
    e.preventDefault?e.preventDefault():e.returnValue=false; 
}