JavaScript三种事件绑定的方式(DOM的0级、2级、3级事件处理程序)

JS事件绑定的方式：

①、行内绑定
②、动态绑定
③、事件监听

一、行内绑定【DOM0级事件处理程序】：

例：<标签 属性列表 事件=”事件的处理程序” />
虽然可以完成需要的功能 但其把结构+样式+行为都绑定在同一个标签中 不利于后期维护

二、动态绑定【DOM0级事件处理程序】：

例：dom对象.事件 = 事件的处理程序(通常是一个匿名函数)
将一个函数赋值给一个事件处理程序属性 简单 且具有跨浏览器的优势

行内绑定与动态绑定的区别：
行内绑定中 其事件处理中的this指向了全局window对象
动态绑定中 其事件处理中的this指向了当前正在操作的dom对象

三、事件监听【DOM2级事件处理程序】：

和DOM0级事件处理程序的优势：可以添加多个事件处理程序
且DOM0级事件会被覆盖 DOM2级事件不会被覆盖
addEventListener()：添加事件 removeEventListener()：删除事件

接收三个参数：
1、要处理的事件名
2、作为事件处理程序的函数
3、一个布尔值(true为在捕获阶段调用事件处理程序 false为在冒泡阶段调用事件处理程序)

IE不支持addEventListener和removeEventListener方法 提供了两个类似的方法：

attachEvent()：添加事件
detachEvent()：删除事件

接收两个参数：
1、要处理的事件名
2、作为事件处理程序的函数

attachEvent()和addEventListener()的区别：

这两个方法都是用来绑定脚本事件 取代obj.οnclick=method

1、attachEvent是IE有的方法 不遵循W3C标准
而其他的主流浏览器例如FF等遵循W3C标准的浏览器都使用addEventListener 因此 实际开发中需分开处理

2、多次绑定后执行的顺序是不一样的
attachEvent是后绑定先执行
addEventListener是先绑定先执行

3、绑定事件时attachEvent必须带on 如onclick onmouseover等
而addEventListener不能带on 如click mouseover等

4、attachEvent仅需传递两个参数
而addEventListener需要传递三个参数
Element.addEventListener(事件类型, 触发后调用的函数, 事件是冒泡还是捕获(可选))
false ：(默认)事件句柄在冒泡阶段执行
true ：事件句柄在捕获阶段执行

---

DOM3级事件处理程序

DOM3级事件在DOM2级事件的基础上添加了更多的事件类型 全部类型如下：

UI事件：当用户与页面上的元素交互时触发 例如：load 和 scroll

焦点事件：当元素获得或失去焦点时触发 例如：blur 和 focus

鼠标事件：当用户通过鼠标在页面执行操作时触发 例如：dbclick 和 mouseup

滚轮事件：当使用鼠标滚轮或类似设备时触发 例如：mousewheel

文本事件：当在文档中输入文本时触发 例如：textInput

键盘事件：当用户通过键盘在页面上执行操作时触发 例如：keydown 和 keypress

合成事件：当为IME（输入法编辑器）输入字符时触发 例如：compositionstart

变动事件：当底层DOM结构发生变化时触发 例如：DOMsubtreeModified

---