istener()的方法，使用这个方法可以为事件目标注册事件处理程序。addEventListener()接受三个参数：第一个参数是要注册处理程序的事件类型，其值是字符串，但并不包括前缀“on”；第二个参数是指当指定类型的事件发生时应该调用的函数；第三个参数是布尔值，其可以忽略（某些旧的浏览器上不能忽略这个参数），默认值为false。这种情况是在事件冒泡过程中注册事件处理程序。当其为true时，就是在事件捕获过程中注册事件处理程序。实例：
? test
?
?
?<script type="text/java script">
? var div1 = document.getElementById('div1');
? var div2 = document.getElementById('div2');
? var div3 = document.getElementById('div3');
? div1.addEventListener('click', function(){ console.log('div1-bubble'); }, false);
? div2.addEventListener('click', function(){ console.log('div2-bubble'); }, false);
? div3.addEventListener('click', function(){ console.log('div3-bubble'); }, false);
? div3.addEventListener('click', function(){ console.log('div3-bubble222'); }, false);
? div1.addEventListener('click', function(){ console.log('div1-capturing'); }, true);
? div2.addEventListener('click', function(){ console.log('div2-capturing'); }, true);
? div3.addEventListener('click', function(){ console.log('div3-capturing'); }, true);
?
结果（鼠标点击div3区域后）：
从结果中可以看出：
①addEventListener()第三个参数的作用正如上面所说；
②通过addEventListener()方法给同一对象注册多个同类型的事件，并不会发生忽略或覆盖，而是会按顺序依次执行；
相对addEventListener()的是removeEventListener()方法，它同样有三个参数，前两个参数自然跟addEventListener()的意义一样，而第三个参数也只需跟相应的addEventListener()的第三个参数保持一致即可，同样可以省略，默认值为false。它表示从对象中删除某个事件处理函数。实例：
div1.addEventListener('click', div1BubbleFun, false);
div1.removeEventListener('click', div1BubbleFun, false);
function div1BubbleFun(){
? ? console.log('div1-bubble');
}
4.attachEvent()
但是，IE8以及其之前版本的浏览器并不支持addEventListener()和removeEventListener()。相应的，IE定义了类似的方法attachEvent()和detachEvent()。因为IE8以及其之前版本浏览器也不支持事件捕获，所以attachEvent()并不能注册捕获过程中的事件处理函数，因此attachEvent()和detachEvent()要求只有两个参数：事件类型和事件处理函数。而且，它们的第一个参数使用了带“on”前缀的事件处理程序属性名。实例：
var div1 = document.getElementById('div1');
? div1.attachEvent('onclick', div1BubbleFun);
? function div1BubbleFun(){
? ? console.log('div1-bubble');
? }
相应的，从对象上删除事件处理程序函数使用detachEvent()。例如：
div1.detachEvent('onclick', div1BubbleFun);
到此为止，我们已经说了浏览器中事件传播机制以及各种注册事件处理程序的方法。下面我们就再说说事件处理程序调用时的一些问题吧！
二.事件处理程序的调用
1.事件处理程序的参数：正如前面所说，通常事件对象作为参数传递给事件处理函数，但IE8以及其之前版本的浏览器中全局变量event才是事件对象。所以，我们在写相关代码时应该注意兼容性问题。实例（给页面上id为div1的元素添加点击事件，当点击该元素时在控制台输出事件类型和被点击元素本身）：
? ?
? ? test
? ?
? ? div1
? ? <script type="text/java script">
? ? ? ? var div1 = document.getElementById('div1');
? ? ? ? if(div1.addEventListener){
? ? ? ? ? ? div1.addEventListener('click', div1Fun, false);
? ? ? ? }else if(div1.attachEvent){
? ? ? ? ? ? div1.attachEvent('onclick', div1Fun);
? ? ? ? }
? ? ? ? function div1Fun(event){
? ? ? ? ? ? event = event || window.event;
? ? ? ? ? ? var target = event.target || event.srcElement;
? ? ? ? ? ? console.log(event.type);
? ? ? ? ? ? console.log(target);
? ? ? ? }
? ?
2.事件处理程序的运行环境：关于事件处理程序的运行环境，也就是在事件处理程序中调用上下文（this值）的指向问题，可以看下面四个实例。
实例一：
? ?
? ? test
? ?
? ? div1
? ? <script type="text/java script">
? ?
结