DOM事件

2017-11-30

整理复习代码的时候发现对DOM的了解太过粗浅，故找资料学习之

参考资料（以下整理内容会标注相应序号，方便查找对应内容）

http://www.cnblogs.com/starof/p/4066381.html

https://segmentfault.com/a/1190000007082623

http://www.cnblogs.com/xiaohuochai/p/5859476.html

http://www.cnblogs.com/xiaohuochai/p/5859674.html

DOM级别与DOM事件（2）

DOM级别一共可以分为4个级别：DOM0级，DOM1级，DOM2级和 DOM3级，而DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。

有另一篇文章一说DOM分级为3级，由于找到的文章多说为4级，此处不多介绍：http://blog.qiji.tech/archives/9339

1、DOM0级事件

第一种写法（或称：HTML事件处理程序）：在html中写入事件并指定函数，如下所示：

<div onclick="clickFunc()"></div>
<script>
    const clickFunc=()=>{
        console.log('click div')
    }
</script>

缺点：js与html代码强耦合，修改难度大，不易拓展

第二种写法：在js中获取元素节点，并将一个函数赋值给该元素的一个事件处理属性，如下所示：

<div id="div"></div>
<script>
    const div = document.getElementById('div')
    div.onclick=()=>{
        console.log('click div')
    }
    // div.onclick=null  解绑事件
</script>

缺点：DOM0级事件无法绑定多个函数

2、DOM2级事件

DOM2级事件定义了addEventListener和removeEventListener两个方法，分别用来注册和移除事件。方法中包含3个参数，分别是绑定的事件处理属性名称（不包含on）、处理函数和是否在捕获时执行事件处理函数。举个栗子：

1 2	element.addEventListener('mouseover', Fn, false) // 注册事件 element.removeEventListener('mouseover', Fn, false) // 移除事件

注意：

通过addEventListener注册的匿名函数无法被移除
移除时传入的参数与注册函数时使用的参数相同
若需传参则需要封装
更多详细请前往MDN的addEventListener相应页面

3、DOM3级事件（此处直接照搬，没有过多了解，以后更新）

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

UI事件，当用户与页面上的元素交互时触发，如：load、scroll
焦点事件，当元素获得或失去焦点时触发，如：blur、focus
鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
文本事件，当在文档中输入文本时触发，如：textInput
键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified

同时DOM3级事件也允许使用者自定义一些事件。关于自定义事件，可以看这里

事件流（3）

事件流又称为事件传播，DOM2级事件规定的事件流包括三个阶段：事件捕获阶段(capture phase)、处于目标阶段(target phase)和事件冒泡阶段(bubbling phase)。在旧的浏览器和版本中事件流存在在些许不同，有关兼容请查看（1）（3）链接，目前标准是：捕获->处于目标->冒泡，（1）中有图解。event.stopPropagation()可以阻止冒泡。event.preventDefault()阻止默认操作，但事件继续传播。

事件触发顺序（4）（此处直接照搬，没有过多了解，以后更新）

<div id="box" style="height:100px;width:100px;background:pink;" onclick = "this.innerHTML +='html\n'"></div>
<script>
if(box.addEventListener){
    box.addEventListener('click',function(){this.innerHTML += 'DOM2级\n'})
}    
if(box.attachEvent){
    box.attachEvent('onclick',function(){box.innerHTML +='IE\n'})
}
box.onclick = function(){
    this.innerHTML += 'DOM0级\n'
}
</script>

【相同点】

如果同时出现HTML事件处理程序和DOM0级事件处理程序，DOM0级会覆盖HTML事件处理程序

【不同点】

chrome/opera/safari等webkit内核的浏览器会按照事件处理程序出现的顺序来排列，所以结果为：DOM2级 DOM0级
firefox浏览器和IE浏览器会将DOM0级事件优先调用
所以firefox和IE11浏览器结果为：DOM0级 DOM2级
IE9、10浏览器结果为：DOM0级 DOM2级 IE
IE8-浏览器结果为：DOM0级 IE