本文共 1790 字，大约阅读时间需要 5 分钟。

1. JavaScript 兼容性处理

1.1 常见的兼容性问题

• 事件监听的兼容性
• 事件参数对象的兼容性
• 事件源对象的兼容性
• 事件冒泡处理的兼容性
• 事件默认行为的兼容性
• scrollTop 属性的兼容性
• 获取非行内样式的兼容性

2. 事件监听兼容

2.1 事件监听的兼容性问题

• W3C标准
  • 添加事件监听：addEventListener
  • 移除事件监听：removeEventListener
• IE低版本标准
  • 添加事件监听：attachEvent
  • 移除事件监听：detachEvent

2.2 事件监听的兼容性语法

• 事件监听兼容性常用语法

if(obj.addEventListener){
   	obj.addEventListener("事件名","事件处理函数")}else{
   	obj.attachEvent("on事件名","事件处理函数")}

2.3 事件监听兼容性练习

3. 事件参数对象的兼容性问题

3.1 参数对象

• 事件参数 event 对象的常用属性

3.2 解决方案

• IE低版本的事件对象使用window.event表示

function (event){
   	var e = event || window.event;}

3.3 事件参数兼容性练习

4. 事件源对象的兼容性问题

• IE的事件源对象的获取
  • window.event.srcElement
• W3C事件源对象的获取
  • Event.target

4.1 事件源对象兼容性练习

5. 事件冒泡

5.1 事件冒泡和捕获

5.2 事件冒泡的兼容性问题

• IE的事件冒泡的中止方法
  • window.event.cancelBubble
• W3C事件冒泡的中止方法
  • stopPropagation

function addEventHandler(target , type , fn){
      if(target.addEventListener){
    	target.addEventListener(type , fn);   }else{
    	target.attachEvent("on"+type , fn);   }}

5.3 事件冒泡的实战应用

• 模态框功能

    
   
  
   
    信息提示
   

6. 阻止默认事件的兼容性问题

• IE的事件默认事件的阻止方法
  • window.event.returnValue
• W3C事件冒泡的阻止方法
  • preventDefault

function prevent(ent){
      if(window.event){
    		window.event.returnValue = false;   }else{
    		ent.preventDefault();   }}

6.1 阻止默认行为兼容性练习

  跳转

7. scrollTop 属性的兼容性问题

• scrollTop 属性值的获取方式
  • document.body.scroll属性(已废弃)
  • document.documentElement.scroll属性

var  scrollTop =  document.body.scrollTop || document.documentElement.scrollTop || 0

8. 获取样式的兼容性问题

• 获取内嵌式或外部样式的方式
  • 使用obj.currentStyle
  • 使用window.getComputedStyle

if（obj.currentStyle）{
        return obj.currentStyle[“attr”];} else {
        return  window.getComputedStyle(obj,null)[“attr”];}

9. 总结

• JavaScript 兼容浏览器写法，做个笔记

转载地址：http://ycqwi.baihongyu.com/