事件捕获和事件冒泡“DOM2级事件”规定的事件流程包括三个阶段：事件捕获、在目标阶段和事件冒泡。首先发生的是事件捕获，从外部节点到内部节点依次遍历，为拦截事件提供机会。然后实际目标接收事件。最后一个阶段是冒泡阶段，从目标元素逐层冒泡到外部元素
，可以响应这个阶段的事件。IE9、Opera、Firefox、Chrome和Safari都支持DOM事件流；IE8及更早版本不支持DOM事件流。EventHandler的常见用法事件处理程序的名字前面加上on，比如onclick、onload。为事件指定事件处理器的方法包括：1）HTML事件处理器：由HTML元素的特性指定：
最大的缺点：HTML和JavaScript紧耦合，不推荐。2）DOM0级事件处理程序：通过JavaScript指定事件处理程序的传统方式是将函数分配给事件处理程序属性。首先必须获得对要操作的对象的引用。每个元素（包括window和document）都有自己的事件处理属性，通常都是小写的，比如onclick。可以通过将此属性的值设置为函数来指定事件处理程序。varbtn=document.getElementById("myBtn");//属性赋值的匿名函数btn.onclick=function(){alert("Clicked");};eventscope:DOM0levelmethod指定的事件处理程序是将其视为元素的方法。因此，此时的事件处理程序是在元素的范围内运行的；也就是说，程序中的this指的是当前元素。去除方法：要删除DOM0层方法指定的事件处理程序，只需将事件处理程序属性的值设置为null，如下所示：btn.onclick=null;//删除事件处理程序还记得如何删除对象实例属性吗？使用delete操作符，删除后instance属性没有了，但是prototype属性还在。缺点：为同一个事件添加两个事件处理器会导致后者覆盖前者。原因是一个事件处理程序是一个属性，如果你给一个属性赋两个值，后者会覆盖前者。3)DOM2-leveleventhandlers“DOM2-levelevents”定义了两个处理绑定和移除事件处理器的方法：addEventListener()和removeEventListener()。这两个方法包含在所有DOM节点中，它们都接受3个参数：要处理的事件的名称（没有on）、作为事件处理程序的函数和一个布尔值。如果最后一个布尔参数为真，则表示事件处理程序在捕获阶段被调用；如果为假，则表示在冒泡阶段调用了事件处理程序。/*为按钮添加一个onclick事件处理器，在冒泡阶段触发该事件*/varbtn=document.getElementById("myBtn");btn.addEventListener("click",function(){alert(this.id);},false);事件范围：与DOM0级方法一样，此处添加的事件处理程序在它们所附加的元素的范围内运行。使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序，并且多个事件处理程序将按照它们添加的顺序触发。IE9、Firefox、Safari、Chrome和Opera支持DOM2级事件处理程序，并为IE8及以下版本提供专用事件处理程序。去除方法：addEventListener()添加的事件处理器只能使用removeEventListener()去除；删除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法通过removeEventListener()移除，因为匿名函数的每次出现都是调用，命名函数的每次出现都是引用。因此，推荐使用具名函数作为eventhandler的函数参数。大多数情况下，事件处理程序被添加到事件流的冒泡阶段（最后一个参数为false），这样可以最大限度地兼容各种浏览器。jQuery和React使用冒泡机制来解决兼容性问题。4）IE事件处理器（非标准方法）IE实现了两个与DOM类似的方法：attachEvent()和detachEvent()。两种方法都接受相同的两个参数：事件处理程序名称和事件处理程序函数。由于IE8及更早的版本只支持事件冒泡，通过attachEvent()添加的事件处理器会被添加到冒泡阶段（DOM2标准推荐使用冒泡阶段，但也可以使用捕获阶段）。varbtn=document.getElementById("myBtn");//获取DOM元素btn.attachEvent("onclick",function(){//注意使用了on的事件名和匿名函数alert("Clicked");});注意：(a)的第一个参数attachEvent()是“onclick”，而不是DOM的addEventListener()方法中的“click”。(b)在attachEvent()方法的情况下，事件处理程序在全局范围内运行，因此它等于window.使用DOM0和DOM2标准方法，事件处理程序在它们所属的元素范围内运行。(c)在冒泡阶段默认添加。(d)可以添加多个事件处理器，多个事件处理器的执行顺序与DOM2相反，即添加顺序相反。varbtn=document.getElementById("myBtn");btn.attachEvent("onclick",function(){alert(this===window);//true});remove：使用attachEvent()添加的事件可以通过detachEvent()移除，条件是必须提供相同的参数。与DOM方法一样，这也意味着无法删除添加的匿名函数。但是，只要可以将对同名函数的引用传递给detachEvent()，就可以删除相应的事件处理程序。5)跨浏览器事件处理程序可以使用能够隔离浏览器差异的JavaScript库或者创建兼容主要浏览器差异的事件处理方法。库的使用可以参考jQuery，这里不再介绍。兼容主要浏览器差异的事件处理方法有addHandler()和removeHandler()，它们都属于EvenUtil对象，接收相同的参数：要操作的元素、事件名称和事件处理函数。这两种方法都首先检查传入元素上是否存在DOM2级方法。如果存在DOM2级方法，则使用该方法：传入事件类型、事件处理函数和第三个参数false（表示冒泡阶段）。如果有IE的方法，就取第二种。请注意，此时的事件类型必须以“on”为前缀才能在IE8及更早版本中工作。最后一种可能是使用DOM0级别的方法（在现代浏览器中，不应执行此处的代码）。此时，我们使用方括号语法将属性名称指定为事件处理程序（添加），或将属性设置为null（删除）。使用方法如下：
