跨浏览器的事件代理

咱们知道，在主流的浏览器里面绑定事件处理程序和解绑分别是:

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