一、浏览器卷去的高度和宽度

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

两个都是获取页面向上滚动的距离
区别：
- Chrome 和 FireFox、IE 浏览器
  - 没有 DOCTYPE 声明的时候，用 document.body.scrollTop
  - 有 DOCTYPE 声明的时候，用 document.documentElement.scrollTop
- Safari
  - 两个都不用，使用一个单独的方法 window.pageYOffset

二、处理事件对象兼容

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

e–标准浏览器；

window.event–低版本浏览器（IE）；

三、按键兼容

事件对象里面有一个叫做 keyCode 的属性，
表示你按下的是哪一个按键，但是是以编码的形式给你
特性： FireFox < 20的版本不支持
火狐低版本使用 which 属性

    //兼容：
    var code = e.keyCode || e.which

四、阻止事件传播的兼容（冒泡和捕获）

标准浏览器： e.stopPropagation()
IE低版本： e.cancelBubble = true

兼容：
方式1：if (e.stopPropagation) { } else { }
方式2： try {} catch (e) { } （尝试第一个大括号里面的代码，如果报错，执行后面的）

五、处理事件目标兼容

目标准确触发事件的那个元素，在事件对象里面有一个属性叫做 target 表示本次事件触发的时候，准确触发的元素我们叫做事件目标
IE低版本不支持
IE低版本使用 srcElement

处理兼容
var target = e.target || e.srcElement

target

target 这个属性是事件对象里面的属性，表示你点击的目标

当你触发点击事件的时候，你点击在哪个元素上，target 就是哪个元素

这个 target 也不兼容，在 IE 下要使用 srcElement

    <body>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
      <script>
      	var oUl = docuemnt.querySelector('ul')
    
        oUl.addEventListener('click', function (e) {
          e = e || window.event
          var target = e.target || e.srcElement
          console.log(target)
        })
      </script>
    </body>

- 上面的代码，当你点击 ul 的时候，target 就是 ul
- 当你点击在 li 上面的时候，target 就是 li

六、获取元素非行间样式兼容

getComputedStyle（非IE使用）

语法：window.getComputedStyle(元素, null).要获取的属性

第二个参数不写的时候默认是null，表示是一个正常元素

第二个参数可以写’after’ || ‘before’，表示获取伪元素的样式

<style>
      div {
        width: 100px;
      }
    </style>
    <body>
      <div style="height: 100px;">
        <p>我是一个 p 标签</p>
      </div>

      <script>
        var oDiv = document.querySelector('div')
	    	console.log(window.getComputedStyle(oDiv).width) // 100px
        console.log(window.getComputedStyle(oDiv).height) // 100px
      </script>
    </body>

    //这个方法获取行间样式和非行间样式都可以

currentStyle（IE使用）

语法：元素.currentStyle.要获取的属性

    <style>
      div {
        width: 100px;
      }
    </style>
    <body>
      <div style="height: 100px;">
        <p>我是一个 p 标签</p>
      </div>

      <script>
        var oDiv = document.querySelector('div')
    		console.log(oDiv.currentStyle.width) // 100px
        console.log(oDiv.currentStyle.height) // 100px
      </script>
    </body>

七、阻止浏览器默认行为的兼容

标准浏览器： e.preventDefault()

IE 低版本： e.returnValue = false

    //兼容：
       方式1： if (e.preventDefault) {} else {}
       方式2： try {} catch (err) {}
       方式3： return false （大部分情况下是可以用的）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <a href="https://www.baidu.com">阻止浏览器默认行为</a>

  <script>
    
    // 获取元素
    var a = document.getElementsByTagName('a')[0]

    a.onclick = function (e) {
      e = e || window.event
      console.log('我被点击了')

      // 阻止默认事件
      // e.preventDefault()

      // IE 低版本
      // e.returnValue = false

      return false
    }
	
	//禁止框选文本
    window.onselectstart = function () {
      return false
    }

    // 右键单击事件
    window.oncontextmenu = function () {
      console.log('右键单击了')
      return false
    }

  </script>
</body>
</html>

八、事件监听的绑定兼容

addEventListener : 非 IE 7 8 下使用
语法： 元素.addEventListener('事件类型'，事件处理函数，冒泡还是捕获)

    oDiv.addEventListener('click', function () {
      console.log('我是第一个事件')
    }, false)

    oDiv.addEventListener('click', function () {
      console.log('我是第二个事件')
    }, false)

当你点击 div 的时候，两个函数都会执行，并且会按照你注册的顺序执行
先打印 我是第一个事件 再打印 我是第二个事件

注意： 事件类型的时候不要写 on，点击事件就是 click，不是 onclick；

attachEvent ：IE 7 8 下使用
语法： 元素.attachEvent('事件类型'，事件处理函数)

    oDiv.attachEvent('onclick', function () {
      console.log('我是第一个事件')
    })

    oDiv.attachEvent('onclick', function () {
      console.log('我是第二个事件')
    })

当你点击 div 的时候，两个函数都会执行，并且会按照你注册的顺序倒叙执行
先打印 我是第二个事件 再打印 我是第一个事件

注意： 事件类型的时候要写 on，点击事件就行 onclick；

两个方式的区别

注册事件的时候事件类型参数的书写
- addEventListener ：不用写 on
- attachEvent ：要写 on
参数个数
- addEventListener ：一般是三个常用参数
- attachEvent ：两个参数
执行顺序
- addEventListener ：顺序注册，顺序执行
- attachEvent ：顺序注册，倒叙执行
适用浏览器
- addEventListener ：非 IE 7 8 的浏览器
- attachEvent ： IE 7 8 浏览器

九、事件解绑

removeEventListener: 非 IE 7 8 下使用
语法：元素.removeEventListener(‘事件类型’，事件处理函数，冒泡还是捕获)
detachEvent：IE 7 8 下使用
语法：元素.detachEvent('事件类型'，事件处理函数)

    var x = document.getElementById("myDIV");
    if (x.removeEventListener) {                   // // 所有浏览器，除了 IE 8 及更早IE版本
        x.removeEventListener("mousemove", myFunction);
    } else if (x.detachEvent) {                   // IE 8 及更早IE版本
        x.detachEvent("onmousemove", myFunction);
    }

声明：本站所发布的一切破解补丁、注册机和注册信息及软件的解密分析文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。