JS的DOM操作和事件的一些兼容

整理了一些关于DOM操作和关于事件的兼容处理

1. 浏览器卷去的高度

• 页面存在 DOCTYPE 标签的时候：document.documentElement.scrollTop

• 页面不存在 DOCTYPE 标签的时候：document.body.scrollTop

• 兼容

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

2. 浏览器卷去的宽度

• 页面存在 DOCTYPE 标签的时候：document.documentElement.scrollLeft

• 页面不存在 DOCTYPE 标签的时候：document.body.scrollLeft

• 兼容

  var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
  

3. 获取元素非行内样式

• 标准浏览器：window.getComputedStyle ( 要获取样式的元素 )

• IE低版本浏览器：元素.currentStyle

• 兼容

  // 标准浏览器
  if (window.getComputedStyle) {
      // ele是想要获取样式的元素
      // 拿到元素所有可以设置的样式
      var result = window.getComputedStyle(ele)
      // style是想要获取的样式
      // 拿到指定的样式
      var s = result[style]
      return s
  }
  // IE低版本浏览器
  if (ele.currentStyle) {
      var result = ele.currentStyle
      var s = result[style]
      return s
  }
  // 行内
  var result = ele.style
  var s = result[style]
  return s 
  

4. 获取事件对象

• 标准浏览器：直接在事件处理函数位置接受一个形参，事件触发的时候，由浏览器传入实参，浏览器会自动传递记录的信息

• IE低版本：直接访问window.event

• 兼容

  e = e || window.event
  

5. 获取键盘按键

• 标准浏览器：keyCode属性

• FireFox < 20：which属性

• 兼容

  var code = e.keyCode || e.which
  

6. dom2级事件绑定

• 标准浏览器：元素.addEventListener（‘事件类型’，事件处理函数）

• IE低版本：元素.attachEvent（‘on事件类型’，事件处理函数）

• 兼容

  function on(ele, type, fn) {
        // ele 表示事件源
        // type 表示事件类型
        // fn 表示事件处理函数
  
        // 判断有没有 addEventListener
        if (ele.addEventListener) {
          ele.addEventListener(type, fn)
          return
        }
  
        // 判断有没有 attachEvent
        if (ele.attachEvent) {
          ele.attachEvent('on' + type, fn)
          return
        }
  
        // IE 5 以下的浏览器, 不支持 dom2级 事件
        // 只能用 on 的方式绑定
        ele['on' + type] = fn
      }
  

7. dom2事件解绑

• 标准浏览器：事件源.removeEventListener(‘事件类型’, 事件处理函数)

• IE低版本：事件源.detachEvent(‘on事件类型’, 事件处理函数)

• 兼容

  function off(ele, type, fn) {
      // ele 表示要解绑的事件源
      // type 表示要解绑的事件类型
      // fn 表示要解绑的事件处理函数
  
      // 标准浏览器判断
      if (ele.removeEventListener) {
      	ele.removeEventListener(type, fn)
          return
      }
  
      // IE 低版本浏览器判断
      if (ele.detachEvent) {
          ele.detachEvent('on' + type, fn)
          return
      }
  
      // 不支持 DOM2 级事件的解绑
      	ele['on' + type] = null
      }
  

8. 获取事件对象目标信息

• 标准浏览器：e.target

• IE低版本：e.srcElement

• 兼容

  var target = e.target || e.srcElement
  

9. 阻止事件传播

• 标准浏览器：e.stopPropagation()

• IE低版本：e.cancelBubble = true

• 兼容

  if (e.stopPropagation) {
  	e.stopPropagation()
  	} else {
  	e.cancelBubble = true
  }
  
  

10. 阻止浏览器默认行为

• 标准浏览器：e.preventDefault()

• IE低版本：e.returnValue = false

• 兼容

  if (e.preventDefault) {
  	e.preventDefault()
  	} else {
  	e.returnValue = false
  }