以前都是直接为对象绑定一个事件处理函数，但是这种方法会导致事件的覆盖。

//给一个对象绑定一个事件处理函数的第一种形式

//obj.onclick = fn;

function fn1() {
    alert(this);
}
function fn2() {
    alert(2);
}

document.onclick = fn1;
document.onclick = fn2;   //会覆盖前面绑定的fn1

给一个对象的同一个事件绑定多个不同的函数，则需要使用第二种形式。

W3C规范：addEventListener()的工作原理是将实现EventListener的函数或对象添加到调用它的EventTarget上的指定事件类型的事件侦听器列表中。

IE9+和chrome等标准浏览器都支持。

IE8及以下非标准的需要使用attachEvent()，这个方法在IE11以后被抛弃。

IE：obj.attachEvent(事件名称，事件函数);

    1.没有捕获

    2.事件名称有on

    3.事件函数执行的顺序：标准ie-》正序   非标准ie-》倒序

    4.this指向window

标准：obj.addEventListener(事件名称，事件函数，是否捕获);

    1.有捕获

    2.事件名称没有on

    3.事件执行的顺序是正序

    4.this指向触发该事件的对象

document.attachEvent('onclick', function() {
    fn1.call(document);
});
document.attachEvent('onclick', fn2);

//是否捕获 : 默认是false    false:冒泡 true：捕获

document.addEventListener('click', fn1, false);
document.addEventListener('click', fn2, false);

可以封装一个函数来解决这个兼容性问题：

function bind(obj, evname, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evname, fn, false);
    } 
    else{
        obj.attachEvent('on' + evname, function() {
            fn.call(obj);
        });
    }
}

bind(document, 'click', fn1);
bind(document, 'click', fn2);

注意：call()是函数下的一个方法，call方法第一个参数可以改变函数执行过程中的内部this的指向，call方法第二个参数开始就是原来函数的参数列表。

var oDiv = document.querySelector("#box");

function fn1(a, b) {
alert(this);
console.log(a + b);
}
// fn1(4,5);

oDiv.onclick = function () {
// null:表示this指向window。
// fn1.call(null,4,2);
// 表示this指向oDiv这个对象。
   fn1.call(oDiv, 4, 2);
}

addEventListener() 是 W3C DOM 规范中提供的注册事件监听器的方法。它的优点包括：

它允许给一个事件注册多个监听器。 特别是在使用AJAX库，JavaScript模块，或其他需要第三方库/插件的代码。

它提供了一种更精细的手段控制 listener 的触发阶段。（即可以选择捕获或者冒泡）。

它对任何 DOM 元素都是有效的，而不仅仅只对 HTML 元素有效。