一、什么是事件？

事件就是用户或者浏览器自身执行的某种动作。如：click   mouserover   mouseout   load  scroll等，都是事件类型的名字。

二、常见的事件回顾

窗口事件：load  resize scroll

鼠标事件：

    click  dblclick  contextmenu   mouseover   mouseout   mouseenter   mouseleave            mousemove  mousedown   mouseup

表单事件：

    focus blur change  input  select   reset   submit  

键盘事件：

     keydown   键盘按下的事件

     keyup  键盘松开的事件

     keypress 键盘按下并松开

     触发顺序：keydown --> keypress --> keyup

     注意：keypress不识别功能键，主要用来接收 ASCII 码中的字符

                keydown  keyup可以识别键盘上所有按键

三、事件对象

事件对象是用来记录事件发生时相关详细信息的对象。如：鼠标移动事件中，获取鼠标移动的位置 ==》 事件对象.clientX (clientX获取鼠标点距离浏览器左边的距离)；

事件对象只有事件被出发时，才会产生，这个事件对象只能在事件函数内部访问。事件函数运行结束，事件对象销毁。

3.1 事件对象的获取

不同浏览器获取事件对象的兼容性写法

element.on+事件类型 = function(e){

var ev = e || window.event;

}

3.2 事件对象属性

不同的事件对象中，属性参数不同

type  获取事件类型

键盘事件对象中属性

keyCode  获取键盘对应的表示

key  获取按键码

鼠标事件对象中的属性

clientX   获取鼠标点距离浏览器有效区域左上角的 X 方向距离

   clientY   获取鼠标点距离浏览器有效区域左上角的 Y 方向距离

四、事件处理程序

响应某个事件得函数叫做事件处理程序，也叫事件处理函数 或 事件句柄。

事件处理程序介绍：

4.1 html事件处理程序: 利用html事件属性，在标签内添加的js代码为html事件处理程序

问题：耦合过高，已经过时

4.2 DOM0级事件处理程序：在JS代码中，通过获取到的元素，使用 on + 事件类型 给其绑定相应的事件函数

优势：兼容所有浏览器，甚至是 IE 低版本

问题：如果给同一个元素，添加多个相同的事件时，后面覆盖前面。

4.3 DOM2级事件处理程序：在JS代码中，通过获取到的元素，给这个元素注册 addEventListener() 或 removeEventListener() ，添加和移除相关事件

优势：可以给同一个元素注册多个相同的事件，依次执行

问题：IE8及以下浏览器不支持DOM2级事件处理程序

4.4 IE事件处理程序：类似于DOM2级事件处理程序，提供了添加和移除相关事件的两个方法：attachEvent() 和 detachEvent()

这两个方法可以兼容IE8及以下浏览器版本，并且可以给同一个元素注册多个同种类型的事件，执行顺序与DOM2级事件处理程序相反，从后往前执行。

同DOM2事件句柄的移除，不能移除匿名的函数。

问题：非IE浏览器  TypeError: btn.attachEvent is not a function

IE11浏览器    对象不支持“attachEvent”属性或方法

IE9 和  IE10浏览器，兼容，执行顺序，从前往后依次执行

IE8及以下浏览器  兼容  执行顺序，从后往前执行。

4.5 兼容所有浏览器版本: 进行浏览器能力检测

看完点个赞，是对up主最大的支持......持续更新中....