Javascript事件总结

471 查看

一：事件流

事件流描述的是从页面中接收事件的顺序，IE和Netscape提出来差不多完全相反的事件流的概念，IE事件流是事件冒泡流，Netscape事件流是事件捕获流。

事件冒泡

IE的事件流叫做事件冒泡，即事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收，然后逐级向上（一直到文档）；如下代码：

</span>

</div>

JS如下：

document.getElementById("aTag").addEventListener('click',aTag);

document.getElementById("span").addEventListener('click',span);

document.getElementById("div").addEventListener('click',div);

function aTag(e) {

alert("点击的是a标签");

}

function span(e) {

alert("点击的是span标签");

}

function div(e) {

alert("点击的是div标签");

}

当单击 “事件测试”文字后，那么click事件会按照如下顺序传播；

1)先打印出：点击的是a标签

2) 再打印出：点击的是span标签

3) 最后打印出：点击的是div标签

4) 最后肯定是document文档。

所有现代浏览器都支持事件冒泡。

事件捕获：

事件捕获与事件冒泡事件流正好相反的顺序，事件捕获的事件流是最外层逐级向内传播，也就是先document，然后逐级div标签， span标签 , a标签;

上面的JS代码改成如下：

document.getElementById("div").addEventListener('click',div,true);

document.getElementById("aTag").addEventListener('click',aTag,true);

document.getElementById("span").addEventListener('click',span,true);

第三个参数设置为true，即为捕获事件，默认为false；否则的话，事件流还是和上面的一样，因为不管是在IE还是标准浏览器下，事件冒泡浏览器都支持的。

DOM事件流

DOM2级事件规定的事件流包括三个阶段，分别是：事件捕获阶段，处于目标阶段和事件冒泡阶段。示意图就不画了，具体的可以看看书。

DOM0级事件处理程序

如下代码是DOM0级事件处理程序：

var btn = document.getElementById("btn");

btn.onclick = function(){

alert("Clicked");

};

使用DOM0级方法指定的事件处理程序被认为是元素的方法，处理程序是在元素的作用域进行的，程序中this是引用的是当前元素。

var btn = document.getElementById("btn");

btn.onclick = function(){

alert(this.id); // 弹出btn

}

单击元素btn后，通过this.id取得元素的属性id，还可以通过this访问元素的任何属性和方法，以这种方式添加的事情处理程序在事件流的冒泡阶段处理。

也可以删除通过DOM0级方法指定的事件处理程序，只要将事件处理程序的属性值设置为null即可。

btn.onclick = null; // 删除事件处理程序；

如下JS代码改成如下：

var btn = document.getElementById("btn");

btn.onclick = function(){

alert(this.id);

}

btn.onclick = null;

再单击btn后，没有任何反应；

DOM2级事件处理程序

DOM2级事件定义了2个方法，用于处理指定和删除事件处理程序的操作；

addEventListener()和removeEventListener()。所有DOM节点都包含这两个方法，他们包含三个参数，第一个参数为事件类型；第二个参数为事件函数，第三个参数为布尔值，如果是true的话，说明是事件流是捕获事件，如果是false的话，那么事件流是冒泡事件；

比如如上的btn代码，我们改成如下：