JavaScript 事件相容性處理
1、event
火狐、IE 7和8不支援
window.event
事件，需要把事件作為形參帶到函數體中才能有效果。是以當需要擷取滑鼠點選事件時，需要做相容處理。（2018-04-03）
document.onclick = function(ev){
var oEvent = ev || window.event;
alert(oEvent.clientX + ',' + oEvent.clientY);
}
2、阻止冒泡事件
JavaScript 執行事件的時候，一般遵循兩個事件階段，一個是捕獲階段，事件從根節點開始，逐級派送到子節點，若節點綁定了事件動作，則執行動作，然後繼續走。另一個是冒泡階段，執行完捕獲階段後，事件由子節點往根節點派送，若節點綁定了事件動作，則執行動作，然後繼續走。
·針對不同的浏覽器，通常需要對事件
cancelBubble
進行相容性處理。（2018-04-03）
<style type="text/css">
.div1{
width: px;
height: px;
background-color: red;
}
.div2{
width: px;
height: px;
background-color: green;
}
.div3{
width: px;
height: px;
background-color: yellow;
}
</style>
<div class="div1" id="div1">
<div class="div2" id="div2">
<div class="div3" id="div3"></div>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
div3.onclick = function(ev){
var oEvent = ev || window.event;
alert('333');
oEvent.cancelBubble = true;
}
div2.onclick = function(ev){
var oEvent = ev || window.event;
alert('222');
oEvent.cancelBubble = true;
}
div1.onclick = function(ev){
var oEvent = ev || window.event;
alert('111');
oEvent.cancelBubble = true;
}
}
</script>
3、scrollTop
IE 7,8，Firefox:
對于沒有
<!DOCTYPE html>
聲明的頁面裡可以使用
document.body.scrollTop
來擷取
scrollTop
高度。
對于有
<!DOCTYPE html>
聲明的頁面裡可以使用
document.documentElement.scrollTop
來擷取
scrollTop
高度。
Safari:
safari有自己擷取scrollTop的函數，
window.pageYOffset
；
Google:
直接使用
document.documentElement.scrollTop
；
4、
attachEvent
與
addEventListener
相容性
attachEvent
是IE浏覽器的IE7,8浏覽器專門識别的事件，其他浏覽器或者版本（IE9及以上），使用
addEventListener
來擷取事件，是以需要做相容性處理
<input type="button" name="button" id="btn1" value="按鈕">
var btn = document.getElementById('btn1');
<script type="text/javascript">
if(window.attachEvent){
btn.attachEvent('onclick', function(){
alert('a');
});
btn.attachEvent('onclick', function(){
alert('b');
});
}else{
btn.addEventListener('click',function(){
alert('a');
},false);
btn.addEventListener('click',function(){
alert('b');
},false);
}
</script>
寫一個通用函數來處理類似問題；
function myAddEvent(obj,ev,fn){
if(obj.attachEvent){
obj.attachEvent('on' + ev,fn);
}else{
obj.addEveventListener(ev,fn,false);
}
}
myAddEvent(btn,click,function(){
alert('a');
})
myAddEvent(btn,click,function(){
alert('b');
})
PS：attachEvent在IE7,8浏覽器中，因為浏覽器的曆史原因，
a
和
b
的出現次數會相反，會先出來
b
，而後出來
a
。
![JavaScript—事件函數[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)