DOM 事件分级

事件

JS 程序使用的是事件驱动的设计模式，即为一个元素添加事件监听函数，当这个元素的相应事件被触发那么其添加的事件监听函数就被调用。事件是 JavaScript 和 HTML 交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互。

DOM0 级

行为本身：浏览器天生自带的一些行为操作

click, mouseover(mouseenter), mouseout(mouseleave), mousedown, mouseup,mousewhell(鼠标滚轮滚动的事件行为), scroll, resize(window.onresize当前屏幕窗口大小改变的行为), focus, blur(文本框获取焦点和失去焦点), keydown, keyup, keypress, load…(在当前元素的私有属性上存储着呢)

事件绑定分为两种方式（内联事件）：

在标签内写onclick事件

1	<input id="myButton" type="button" value="Press Me" onclick="alert('thanks');" >

在 JS 中写 onclick=function() {} 函数

1
2
3

document.getElementById("myButton").onclick = function () {
    alert('thanks');
}

只支持冒泡，不支持捕获；事件函数不能使用闭包或者匿名函数

0级 DOM 多次添加事件，后面添加的事件会覆盖前面的
0级 DOM 取消事件绑定，采用 element.onclick = null
0级 DOM 在事件监听函数中返回 false 可以阻止浏览器执行默认行为

DOM2 级

只用一个监听方法：addEventListener() 和 removeEventListener()

有三个参数：

第一个参数是事件名（如click）
第二个参数是事件处理程序函数
第三个参数如果是 true 则表示在捕获阶段调用，为 false 表示在冒泡阶段调用

与 DOM0 级事件不同，addEventListener() 可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用
removeEventListener() 不能移除匿名添加的函数
IE8及以下浏览器使用 attachEvent 与 detachEvent，且没有第三个参数（即IE8浏览器只存在事件冒泡）

只有2级 DOM 包含3个阶段：事件一开始从文档的根节点流向目标对象（事件捕获阶段），然后在目标对向上被触发（处于目标阶段），之后再回溯到文档的根节点（事件冒泡阶段）；事件函数可以是一个闭包或者函数表达式

注意：冒泡可以被阻止，捕获不能被阻止。

1
2
3

<span>
    <a></a>
</span>

点击a后capturing(捕捉)阶段事件传播会从document->span->a，然后发生在a，最后bubbling(冒泡)阶段事件传播会从a->span->document

2级 DOM 使用 e.stopPropagation() 阻止事件从当前正在处理它的节点传播（冒泡），IE：e.cacelBubble = true
2级 DOM 使用 e.preventDefault() 阻止浏览器默认行为，IE：e.returnValue = true
2级 DOM 事件绑定中 this 有可能不是指向触发事件的元素，使用 e.currentTarget 表示正在处理事件的节点。如果在 capturing 阶段和冒泡阶段处理事件，这个属性就与 target 属性不同。在事件监听函数中应该用这个属性而不是this。IE：e.srcElement。

DOM事件分级比较

DOM0级事件<input type=“button” onclick=“hello()” />，html 与 js 代码耦合在一起，不利于维护，可以添加多个事件处理程序，如果不想要该事件处理程序，必须从 html 代码在删除事件处理代码。element.onclick=function(){} 属于DOM0级事件，不能添加多个事件处理程序，后面添加的会覆盖前面的。如果不想要了，可以在下面写成 element.onclick=null。
DOM1级主要隐射文档结构，没有事件
DOM2级事件，element.addEventListener(‘click’,fuction(){},false)以及element.removeEventListener('click',function(){},false)。注意：DOM2级事件处理程序，函数里面也可以直接用this，this代表的是点击的按钮，比如里面可以写this.value等。
DOM3级事件主要增加了一些事件类型，包括鼠标事件，键盘事件。

document.querySelectorAll

document.querySelectorAll('.classname')返回的是 NodeList 对象，是静态的，不随文档的更新而变化。但是使用getElementsByName方法返回的也是NodeList对象，但是这个对象的确是动态的。

为什么getElementsByTagName()要比querySelectorAll()快很多？