#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; 
}

键盘事件对象 KeyboardEvent 和其兼容问题

inputId.onkeyup = function(e){
    console.dir(e);
}

code: 当前键盘的按键，例如按删除键，code值是“Backspace”,IE6~8下不兼容。且IE6~8下没有这个属性。还有一个key属性和code一样，存储的是按键的名字。同样IE6~8下也没有。
keyCode：存储的是当前键盘按键的对应的码值。大部分按键都有自己的码值。兼容所有浏览器。

which：和keycode一样，对应的也是键盘码的值。 IE6~8下不兼容。

移动端手指事件 TouchEvent

touches&changedTouches & targetTouches:存储的是当前屏幕上每一个手指操作的位置信息
touches:只有手指在屏幕上我们才可以获取对应的信息值
changedTouches:它可以记录手指离开屏幕一瞬间所在的位置信息。
targetTouches:

移动端的click是点击事件（不是PC端的点击效果），存在300MS的延迟，项目中我们需要解决这个延迟，使用touchstart touchmove touchend

oBox.ontouchend = function(){
//手指离开处理点击事件。问题：长按和滑按等不属于点击事件，会被当成点击事件处理。
}
处理滑按操作