setCapture、releaseCapture、addEventListener、removeEventListener、滚轮封装

前言：

只要还有明天，今天就永远是起跑线

--------------------------------正文---------------------------------

setCapture可以将鼠标事件锁定在指定的元素上，当元素捕获了鼠标事件后，该事件只能作用在当前元素上
releaseCapture()可以为指定的元素解除事件锁定

以下情况会导致事件锁定失败：

  1、当窗口失去焦点时，锁定的事件，自动就会取消
  2、alert也会导致事件的锁定取消。解决办法是在alert之后再次锁定
  3、鼠标右键也会导致事件解锁

setCapture只可以作用于以下事件：

    onclick
    ondblclick
    onmousedown
    onmouseup
    onmouseover
    onmouseout

setCapture不可作用于键盘等其它事件，只能作用于鼠标事件
主要用于: onmouseover 与 onmouseout 事件。

addEventListener() 方法用于向指定元素添加事件句柄

EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的
事件时，指定的回调函数就会被执行。 事件目标可以是一个文档上的元素 Document 本身，或者任何其他支持
事件的对象 (比如 XMLHttpRequest)

removeEventListener() 方法用于移除由 addEventListener() 方法添加的事件句柄
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除

注意： 如果要移除事件句柄，addEventListener() 的执行函数必须使用外部函数

格式

 addEventListener("事件名" , "事件处理函数" , "布尔值")

注意：两个都要用时函数不能带参数，不然不能移除

 eg：
    document.body.addEventListener('touchmove',bodyScroll,false)
    document.body.removeEventListener('touchmove',bodyScroll,false)

使用window.navigator.userAgent属性判断浏览器类型及版本

滚轮封装

  //  添加事件监听
  function addEvent(obj,sEv,fn){
      // attachEvent——兼容：IE7、IE8；   不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
      // addEventListener——兼容：firefox、chrome、IE、safari、opera；   不兼容IE7、IE8
      if(obj.addEventListener){
          obj.addEventListener(sEv,fn,false);
      }else{
          obj.attachEvent('on'+sEv,fn);
      }
  }
  // 删除事件监听
  function removeEvent(obj,sEv,fn){
      if(obj.removeEventListener){
          obj.removeEventListener(sEv,fn,false);
      }else{
          obj.detachEvent('on'+sEv,fn);
      }
  }
  // 滚轮事件
  function addWheel(obj,fn){
      // 判断浏览器是否是Firefox
      // 使用window.navigator.userAgent属性判断浏览器类型及版本
      if(window.navigator.userAgent.indexOf('Firefox')!=-1){
          addEvent(obj,'DOMMouseScroll',fnWheel);
      }else{
          addEvent(obj,'mousewheel',fnWheel);
      }
      // 滚轮触发执行函数
      function fnWheel(ev){
          var oEvent = ev||event;
          // ture     下
          // false    上
          var bDir = true;
          // 判断滚动方向
          bDir = oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;

          /* if(oEvent.wheelDelta){
              //other
              if(oEvent.wheelDelta<0){
                  bDir = true;
              }else{
                  bDir = false;
              }
          }else{
              //firefox
              if(oEvent.detail>0){
                  bDir = true;
              }else{
                  bDir = false;
              }
          } */
          // 执行回调函数
          fn&&fn(bDir);
          // 阻止默认事件          addEventListener没有return false
          ev.preventDefault&&ev.preventDefault();
          return false;
      }
  }