1、btn1_click这个事件没有被触发，所以在DOM Level 0中的只能一个元素只能绑定一个事件，并且绑定的是最后绑定的那个事件，这个有点像jquery中的html方法一样，后面的会覆盖掉前面的内容一样
2、content_click的触发也同时也证明了DOM Level 0不会阻止事件冒泡的发生
在DOM Level 0中要为事件解除绑定，我们可以这样设置
btn1.onclick=null;
将click事件设置为null也就可以解除事件绑定了
接下来我们来说一说什么是DOM Level 2，DOM Level 2支持事件的冒泡与捕获，但是由于有些浏览器的不支持事件捕获，所以为了更好的兼容更多的浏览器，建议使用事件冒泡，除非是业务需要在某个事件触发之前触发某个事件，那么就需要使用事件的捕获。下面我们就来看看什么是DOM Level 2，JS部分如下
var btn1=document.getElementById("btn1"); var content=document.getElementById("content"); btn1.addEventListener("click",function(){ alert("btn1"); },false); btn1.addEventListener("click",function(){ alert("btn2"); },false); content.addEventListener("click",function(){ alert("content"); },false);
运行的结果是：先弹出btn1,然后弹出btn2,最后弹出content ，运行的结果我们可以分析出来：
DOM Level 2可以在一个元素上面注册一个事件的时候在注册另外一个事件，也就是可以同时在一个元素上面存在多个事件
DOM Level 0与DOM Level 2的主要区别去了上面说的一点外还有以下的几点：
1、DOM Level 2可以在一个元素上面注册多个事件，但是DOM Level 0就不可以
2、DOM Level 0的兼容性好，可以支持所有的浏览器，但是DOM Level 2中的addEventListener的这个方法在IE浏览器是不支持的，IE浏览器支持attachEvent事件，attachEvent事件支持两个参数，第一个是事件类型，第二个是执行的函数，DOM Level 0不同于addEventListener，这个在使用的时候要加上on，例如：addEventListener的单击事件是click,而attachEvent的单击事件是onclick，由于IE只支持冒泡事件，所以没有第三个参数
3、DOM Level 2在IE中的绑定事件是attachEvent，解除绑定是detachEvent,在标准的浏览器绑定事件是addEventListener，解除绑定是removeEventListener
所以为了兼容IE浏览器和标准的浏览器，我们需要编写通用的方法来处理，方法如下：
var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } }, removeHandler: function (element, type, handler) { if (element.removeEventListener()) { element.removeEventListener(type, handler, false); } else if (element.detachEvent) { element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } } };
方法来源于网上，如有错误请指出
这个通用的方法在使用的时候要注意的是handler不能在方法里面直接写，要在外部将方法封装好，然后在通过调用外部这个封装好的方法来实现，因为移除绑定事件的时候也要传handler事件对应的方法，这个做的一个主要的原因是使用DOM Level 2可以注册多个事件，但是移除的时候可以指定要移除元素上面的哪个事件，所以需要传handler参数
讲到这个我们就来拓展一下事件里面的一些相关属性
我们直接打印事件可以得到如下图：
上图中的重要属性对应的介绍如下所示：
type: 触发事件的类型;
bubbles: 表名事件是否冒泡;
cancelable: 表名是否可以取消事件的默认行为;
currentTarget: 当前正在处理事件的元素;
target: 事件的目标元素;
defaultPrevented: 表名是否已经调用了preventDefault()方法;
detail: 与事件相关的细节信息;
eventPhase: 表示事件处理的阶段: 1,捕获阶段; 2,处于阶段; 3,冒泡阶段;
trusted: true表示该事件是浏览器生成的, false表示是开发人员通过JavaScript创建的;
view: 与事件关联的抽象视图, 相当于发生事件的window对象;
preventDefault(): 取消事件的默认行为;
stopImmediatePropagation(): 取消事件的进一步获取或者冒泡, 同时阻止任何事件处理程序被调用;
stopPropagation(): 取消事件的进一步获取或者冒泡;
这些属性虽然在使用的时候比较少涉及，但是关键时候有时候还是需要用到的，这里面有几个属性需要特别说明：
一、stopPropagation()与preventDefault()的区别
preventDefault()主要是用来阻止标签的默认行为