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=)