我们晓得,在主流的浏览器内里绑定事宜处置惩罚顺序息争绑分别是:
绑定: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;
}