我们知道,在主流的浏览器里面绑定事件处理程序和解绑分别是:
绑定: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;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。