跨瀏覽器的事件代理

咱們知道，在主流的瀏覽器裏面綁定事件處理程序和解綁分別是:

綁定：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;
}