我们晓得，在主流的浏览器内里绑定事宜处置惩罚顺序息争绑分别是:

绑定：addEventListener(eventType, handler, useCapture);
解绑：removeEventListener(eventType, handler, useCapture);

eventType: 事宜的名字，string范例，比方‘click’
handler: 事宜处置惩罚顺序，function范例
useCapture: 
    假如为true, handler在事宜捕捉阶段实行
    假如为false, handler在事宜冒泡阶段实行

然则IE9之前，IE的事宜处置惩罚顺序是不一样，起首看看它的两个要领：

绑定：attachEvent(eventNameWithOn, handler)
解绑：detachEvent(eventNameWithOn, handler) 

eventNameWithOn: 事宜的名字,而且前面有‘on’
handler: 事宜处置惩罚顺序

IE的事宜处置惩罚顺序除了从要领名字的差别，另有其他的一些差别，来做一个总结：

1: 参数差别
  IE版本没有useCapture这个参数，由于IE只支撑冒泡，所以也没必要给出这个参数了。也能够理解为在attachEvent()和detachEvent()内useCapture为false.
2: this差别
  在非IE的其他浏览器中，我们传递给事宜处置惩罚顺序(handler)的this是事宜目的元素（也就是我们的target）;然则，IE的this倒是Window
3: Event对象差别
  在非IE的其他浏览器中，我们会把Event对象传给我们的事宜处置惩罚顺序（handler），然则IE却没有，而是作为一个属性绑定在了Window上
4: 在非IE的其他浏览器中和IE的Event实例中的内容是不一样的
    1: 事宜源： target -> srcElement(IE)
    2: 阻挠浏览器默许行动：preventDefault -> returnValue = false(IE)
    3: 阻挠事宜冒泡： stopPropagation -> cancelBubble = true
    实在另有许多的差别，以上三点算是比较主要又广泛的

所以假如我们要完成一个跨浏览器的事宜代办，就要处置惩罚IE的那些差别。假定我们有如许的一段HTML:

<ul class='bookList'>
    <li class='bookItem'>book 1</li>
    <li class='bookItem'>book 2</li>
    <li class='bookItem'>book 3</li>
    <li class='bookItem'>book 4</li>
</ul> 

我们想要完成一个结果，点击'<li>’的时刻，弹出此'<li>’内的笔墨。我们采纳代办的体式格局，应用时候的冒泡把事宜绑定到‘<ul>’上，而不是每个‘<li>’上面:

var bookList = document.getElementsByClassName('bookList')[0];

if(document.addEventListener){
    bookList.addEventListener('click', function(event){
        var target = getTarget(event);
        if(target.nodeName === 'LI'){
            alert(target.innerHTML);
        }
    })
}
if(document.attachEvent){
    bookList.attachEvent('click', function(event){
        var target = getTarget(event);
        if(target.nodeName === 'LI'){
            alert(target.innerHTML);
        }
    })

}

function getTarget(event){
    var event = event || window.event;
    var target = event.target || event.srcElement;
    return target;
}