为您解惑：JS事件流之由浅入深剖析......

来源：互联网发布：项目投资价值数据分析报告编辑：程序博客网时间：2024/05/22 12:52

事件流描述的是从页面中接收事件的顺序，也就是说当一个事件产生时，这个事件的传播过程，就是事件流。

1.IE的事件流：

IE中的事件流叫事件冒泡即：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。对于html来说，就是当一个元素产生了一个事件，它会把这个事件传递给它的父元素，父元素接收到了之后，还要继续传递给它的上一级元素，就这样一直传播到document对象。

2.标准浏览器的事件捕获流：

捕获事件即：事件从document对象开始，然后事件一级一级往下传，直到最具体的元素为止，刚好和冒泡事件相反。

3.事件处理程序：

（1）HTML事件处理程序（即事件写在HTML文档页面中）。

（2）DOM0级事件处理程序。

（3）DOM2级事件处理程序。

DOM2级事件定义两个方法：用于处理指定和删除事件处理程序的操作即：addEventListner()和removeEventListner()。他们都要接受三个参数：要处理的事件名、事件处理函数以及boolean值（true表示捕获事件流，false表示冒泡事件流）。而IE事件处理程序的函数为：attachEvent()和detachEvent()。他们只接受两个参数：要处理的事件名、事件处理函数。

DOM0级与DOM2级的简单实例如下：

a.使用DOM0级，在向同一事件(比如onclick)添加处理函数时，只能添加一个，如果添加了两个，后面的会覆盖前面的：
element.onclick = clickHandler1;
element.onclick = clickHandler2; //clickHandler2会覆盖clickHandler1.

b.而使用DOM2级，可以向同一事件添加多个处理函数：

element.addEventListener('clcik',clickHandler1,false);
element.addEventListener('clcik',clickHandler2,false);

注：现在的浏览器默认是采用的是事件冒泡；在DOM0级方法绑定事件只能是事件冒泡，不能设置；在DOM2级你可以设置是用事件冒泡还是事件捕获。

下面重点讨论一下DOM0级事件处理程序：

a. 使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此是在元素的作用域中运行，换句话说，程序中的this引用的是当前元素。

<span style="font-size:14px;"><script  type="text/javascript">    var div_id = document.getElementById("div_id");    div_id.onclick = function(){         alert(this.id);   //div_id    };</script></span>

可以在事件处理程序中通过this访问元素的任何属性和方法，以这种方式(即DOM0级)添加的事件处理程序会在事件流中的冒泡阶段被处理。

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

<span style="font-size:14px;"></span><pre name="code" class="javascript"><span style="font-size:14px;"><script  type="text/javascript"></span>

btn.onclick = null; //删除事件处理程序
</script>

c.在DOM0级事件处理程序中取消冒泡事件的封装函数。

<span style="font-size:14px;">function stopPro(e) {    //e指事件处理函数中的event参数。    if (e && e.stopPropagation) {      //W3C取消冒泡事件      e.stopPropagation();    } else {      //IE取消冒泡事件      window.event.cancelBubble = true;    }  };</span>

d.事件冒泡的例子如下：

<span style="font-size:14px;"><!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>事件冒泡</title>  <style type="text/css">  #child{    background: red;    width:50px;    height:50px;  }  #father{    width:100px;    height:100px;    background:green;  }  #grandparent{    width:150px;    height:150px;    background:black;    margin:100px auto 0;  }  </style></head><body>  <div id='grandparent'>    <div id='father'>      <div id='child'></div>    </div>  </div></body><script type="text/javascript">  var grandparent = document.getElementById("grandparent");  var parent = document.getElementById("father");  var child = document.getElementById('child');  var html = document.getElementsByTagName("html")[0];  var body = document.body;  child.onclick = function () {    console.log("我是儿子");  }  parent.onclick = function () {    console.log("我是父亲");  }  grandparent.onclick = function () {    console.log("我是爷爷");  }  window.onclick = function () {    console.log("我是window");  }  document.onclick = function () {    console.log("我是document");  }  html.onclick = function () {    console.log("我是html");  }  body.onclick = function () {    console.log("我是body");  }</script></html></span>

下面是事件流的相关教程链接：

（1）http://www.cnblogs.com/blackwood/archive/2013/03/14/2959195.html （一）

（2）http://www.cnblogs.com/blackwood/archive/2013/03/15/2961006.html （二）

（3）http://www.runoob.com/jsref/dom-obj-event.html（HTML DOM事件教程）

PS：猿猿们有什么意见和建议可以留言给我呦！

1 0