共计 2879 个字符，预计需要花费 8 分钟才能阅读完成。
什么是事件
事件是元素天生具备的行为方式（和写不写 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;}
