事件冒泡与事件捕获
IE的事件流叫做事件冒泡(event bubbing),即事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。
所有现代的浏览器都支持事件冒泡,但在具体实现上还是有一定差别的。IE5.5及更早版本的事件冒泡会跳过<html>元素(从body直接到document)。IE9,Firefox,Chrome,Safari则将事件冒泡到window对象。
Netscape Communicator团队提出的另一种事件流叫做事件捕获(event capturing)。
事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。
DOM事件流
“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段,处于目标阶段和事件冒泡阶段。
事件处理程序
事件就是用户或浏览器自身的某种动作。诸如:click,load和mouseover等,都是事件的名字。而响应某个事件的函数叫做事件处理程序。事件处理程序以“on”开头,因此click的事件处理程序是onclick。为事件指定处理函数的方法有好几种,下面我们一一介绍。
HTML事件处理程序:
<a href="javascript:void(0);" onclick="showMessage()">百度</a>
缺点有二:
1.时差问题,用户可能会在已进入页面时,就点击元素,这时函数还可能未被完全加载。这时就会引发错误。为此,很多HTML事件处理程序都会被封装在一个try-catch块内,以便错误不会付出水面。
<a href="javascript:void(0);" onclick="try { showMessage('腾讯') }catch{ }">腾讯</a>
2.让HTML和JavaScript紧密耦合,如果要更换事件处理函数,就要改动两个地方:HTML和JavaScript,而这正是许多开发人员摒弃HTML事件处理函数的原因。
DOM0级事件处理程序:
通过将一个函数赋值给一个事件处理程序属性。它具有简单,并具有跨浏览器的优势。
例如:
var but = document.getElementById("ButtonValid");
but.onclick = function () {
console.log(this);
}
删除这个DOM0级别的方法指定的事件处理函数,只要将null赋值给这个属性即可。
but.onclick = null;
DOM2级事件处理程序:
“DOM2级事件”定义了两个方法来用于指定和删除事件处理程序:addEventListener()和removeEventListener()。所有的DOM节点都包含这两个方法,并且它们接收3个参数:事件名(例如:click,load等),函数,bool(true表示是在捕获阶段调用事件处理函数,false表示在冒泡阶段调用事件处理函数)。
var but2 = document.getElementById("ButtonDOM2");
//1.添加一个匿名函数
but2.addEventListener("click", function () {
console.log(this);
}, false);
调用removeEventListener()移除时,有一点需要注意,那就是函数不能是匿名函数,并且参数相同。
使用DOM2级别事件处理函数的好处是:可以为同一个事件添加多个事件处理函数
支持的浏览器:IE9+,Firefox,Chrome,Opera,Safari
IE事件处理程序:
IE实现了与DOM类似的两个方法:attachEvent()和detachEvent()。这两个方法都接受两个参数:事件名称和函数。默认为冒泡阶段触发。