本篇文章给大家带来了JavaScript中关于事件的基础知识详解，其中包括了事件冒泡和时间捕获，希望对大家有帮助。
一、事件冒泡与事件捕获
当我们在Web页面单击某一个元素的时候，比如某个p元素。仔细想想，我们单击的不仅仅是这一个p元素，一同被单击的还有以该p为圆心的同心圆元素，比如元素的父，外层body、body的父元素html还有外层的document。事件在这些嵌套的元素之间的传播称为事件流。
1、事件冒泡
2、事件捕获
1、事件冒泡
IE的事件流称为事件冒泡，事件从最具体的元素开始，逐级向上传播。我们使用DOM0添加的事件处理程序就是在事件冒泡阶段被处理的。例如：
<html><head><script type="text/javascript"> window.onload = bubblingHandle; function bubblingHandle() { //内层p处理程序 document.getElementById("inner").onmousedown = function() { alert("inner p"); } //外层p处理程序 document.getElementById("outer").onmousedown = function() { alert("outerp"); } document.onmousedown = function() { alert("document"); } } </script></head><body> <p id="outer" style="background-color:black; padding: 15px;"> <p id="inner" style="background-color:white; padding: 5px;"></p> </p></body></html>当点击内层的白色p时，会依次显示：
inner pouter pdocument
事件捕获
网景提出的事件流称为事件捕获，其与IE几乎相反。事件首先由最不具体的元素接收，然后逐级向具体节点传播。
二、DOM0级事件处理
事件，由WEB页面中发生的一些特定行为触发。比如在某个页面元素上按下鼠标左键，按下键盘某个按键，某对象获得或丢失焦点时均会触发对应的事件。JavaScript和HTML的交互就是通过事件来实现的。我们使用事件侦听器对事件进行“注册”，事件发生时便执行相应的代码。
DOM0级事件处理程序以其简单、跨浏览器支持的特点，至今仍为所有浏览器支持。
通过DOM0级方法指定事件处理程序
事件处理程序中的this
通过DOM0级方法删除事件处理程序
通过DOM0级方法指定事件处理程序
通过DOM0级方法指定事件处理程序方法很简单，首先取得一个要操作元素的引用，然后接将一个函数赋值给该元素的对应事件处理程序属性。（每个元素包括window和document都拥有自己的事件处理程序属性。）注意，这种方法添加的事件处理程序将在事件流的冒泡阶段被处理。
有关事件处理程序属性，有以下几点需要说明：
1、事件处理程序属性全部小写，以”on”开头，后面跟事件类型：
onclick //单击鼠标onload //图像或页面载入完成onmouseover //将鼠标移动到某元素上面onmousemove //移动鼠标onfocus //对象获得焦点
2、每个元素如img、a、input、form包括window和document都拥有自己的事件处理程序属性。如：
document.getElementById("btn1").onclick //btn1上单击鼠标document.getElementById("img1").onmouseover //鼠标移动到img1document.getElementById("img1").onmerror //img1图像无法载入接下来，给事件处理程序属性赋值即可完成事件处理程序方法的指定。例如，当鼠标移动到”img1”上时，弹出对话框”This is a nice pic!”：
var pic1 = document.getElementById("img1");pic1.onmouseover = function() { alert("This is a nice pic!");};特别注意：如果以上代码处于文档的底部，在页面刚刚加载时，我们将鼠标移动到img1上面。有可能由于代码尚未执行，不会弹出我们设定的对话框！如今，这个延迟已经十分短暂。
事件处理程序中的this
通过DOM0级方法指定的事件处理程序，属于元素方法。因此，我们在事件处理程序中的this引用的是该元素！通过以下例子来说明：
<input id="btn1" type="button" value="Click Me" />...//省略<script type="text/javascript"> <!-- var btn1 = document.getElementById("btn1"); btn1.onclick = function() { alert(this.id + "\n" + this.type + "\n" + this.value); }; --></script>通过DOM0级方法删除事件处理程序
要删除事件处理程序，只需要将对应的事件处理程序属性设置为null即可：
pic1.onmouseover = null;
三、DOM2级事件处理
1、addEventListener与removeEventListener
目前，几乎所有的浏览器都支持DOM0事件模型，但鼓励开发人员使用新的DOM2模型。DOM2模型与DOM0有两个显著区别：
1、DOM2不依赖事件处理程序属性
2、可以同时对对象的同一事件注册多个处理程序，它们按照注册顺序依次执行。
DOM2定义了2个方法：
addEventListener() //指定事件处理程序removeEventListener() //删除事件处理程序
所有DOM节点有包含这两个方法，这两个方法用法如下，它们都接收3个参数，第1个为要处理事件名(不含on)，第2个事件处理函数，第3个布尔变量：
例如我们为按钮btn1的单击事件添加2个事件处理程序，事件处理程序在事件冒泡阶段被处理：
<input id="btn1" type="button" value="Click Me" />...<script type="text/javascript"> <!-- var btn1 = document.getElementById("btn1"); var handle1 = function() { alert("handle1!"); } var handle2 = function() { alert("handle2!"); } btn1.addEventListener("click", handle1, false); btn1.addEventListener("click", handle2, false); --></script>当单击btn1按钮时，会依次弹出对话框：
handle1!handle2!
我们可以用removeEventListener()方法来删除我们刚才指定的事件处理程序，注意参数要保持一致：
btn1.removeEventListener("click", handle2, false);此时单击btn1按钮，只会显示handle1!。
要特别注意的是，如果我们使用匿名函数指定事件处理程序，便无法使用removeEventListener()方法删除事件处理程序：
btn1.ad