util-5.事件操作函数

版权声明：zf版权所有 https://blog.csdn.net/u014381542/article/details/89028800

/**
 * ========================事件操作函数========================
 */
var eventUtil = {
    /**
     *   1.获取屏幕宽:  window.screen.width  || document.documentElement.clientWidth
         2.获取屏幕高:  window.screen.height  || document.documentElement.clientHeight
         IE5-8: document.documentElement.clientWidth || document.body.clientWidth
         other: window.innerWidth
         var w = window.innerWidth
         || document.documentElement.clientWidth
         || document.body.clientWidth;
         var h = window.innerHeight
         || document.documentElement.clientHeight
         || document.body.clientHeight;

         3.手机旋转事件:
         var resizeEvt = 'onorientationchange' in window?'orientationchange':'resize';
         window.addEventListener(resizeEvt, function(){
                //执行相应操作
                switch(window.orientation){
                  case 0: break;  //横屏
                  case 180: break;  //横屏
                  case 90: break;  //竖屏
                  case -90: break;  //竖屏
                }
            });

         4.手机旋转事件兼容性问题：
         A.使用（window.innerWidth和window.innerHeight）或者（$(window).width()和$(window).height()）-----安卓：获取到的值为旋转之前的值--------iphone：正确
         B.使用（window.screen.width和window.screen.height）获取屏幕高度和宽度 ------安卓：旋转后值正确 ------iphone：跟旋转无关，保持不变

         var isAndroid = navigator.userAgent.indexOf('Android') > -1?true:false;
         var w = isAndroid?window.screen.width:$(window).width();
         var h = isAndroid?window.screen.height:$(window).height();
     */

    /**
     * 获取当前事件
     * @param e
     * @returns {any}
     */
  "getEvent" : function(e){  
    var e = e || window.event;
    var ev = e.changedTouches?e.changedTouches[0]:e.targetTouches[0];
    //jQuery滑动处理
    // var ev = e.originalEvent.changedTouches?e.originalEvent.changedTouches[0]:e;
    return ev;
  },

    /**
     * 获取事件类型名称
     * @param event
     * @returns {string}
     */
  "getEventType" : function(event){
      var event = event || window.event;
      return event.type;
  },

    /**
     * 获取事件目标节点名称
     * @param event
     * @returns {EventTarget}
     */
  "getEventTarget" : function(event){
      var event = event || window.event;
      if(event.target){
        return event.target;  //event.target.nodeName,event.target.nodeType
      }else{
        return event.srcElement;
      }  
  },

    /**
     * 添加事件
     * @param elem //元素节点
     * @param type //事件类型
     * @param callback  //回调
     */
  "addHandler" : function(elem,type,callback){
      if (elem.addEventListener) {   //DOM1级事件
        elem.addEventListener(type,callback,"false");
      }else if(elem.attachEvent){
        elem.attachEvent("on"+type,callback);
      }else{  //DOM0级事件
        elem["on"+type] = callback;
      }
  },

    /**
     * 移除事件
     * @param elem
     * @param type
     * @param callback
     */
  "removeHandler" : function(elem,type,callback){
      if (elem.removeEventListener) {  
        elem.removeEventListener(type,callback,"false");
      }else if(elem.detachEvent){
        elem.detachEvent("on"+type,callback);
      }else{
        elem["on"+type] = null;
      }
  },

    /**
     * 阻止冒泡
     * @param event
     */
  "stopPropagation" : function(event){
      var event = event || window.event;
      if (event.stopPropagation) {
        event.stopPropagation;
      }else{
        event.returnValue = false;
      }
  },

    /**
     * 阻止默认行为
     * @param event
     */
  "preventDefault" : function(event){
      var event = event || window.event;
      if (event.preventDefault) {
        event.preventDefault;
      }else{
        event.cancelBubble = true;
      }
  },
    /**
     *在这里我们可以明确DOMContentLoaded所计算的时间，当文档中没有脚本时，浏览器解析完文档便能触发 DOMContentLoaded 事件；如果文档中包含脚本，则脚本会阻塞文档的解析，而脚本需要等位于脚本前面的css加载完才能执行。在任何情况下，DOMContentLoaded 的触发不需要等待图片等其他资源加载完成。
     接下来，我们来说说load，页面上所有的资源（图片，音频，视频等）被加载以后才会触发load事件，简单来说，页面的load事件会在DOMContentLoaded被触发之后才触发。
     我们在 jQuery 中经常使用的 $(document).ready(function() { // ...代码... }); 其实监听的就是 DOMContentLoaded 事件，而 $(document).load(function() { // ...代码... }); 监听的是 load 事件。
     * @param fn  //页面加载完成以后回调
     * @returns {number}
     */
   "documentReady": function(fn){
        if(document.addEventListener) {
            document.addEventListener('DOMContentLoaded', function() {
                document.removeEventListener('DOMContentLoaded',arguments.callee, false);
                fn();
            }, false);
        }

        // 如果IE
        else if(document.attachEvent) {
            // 确保当页面是在iframe中加载时，事件依旧会被安全触发
            document.attachEvent('onreadystatechange', function() {
                if(document.readyState == 'complete') {
                    document.detachEvent('onreadystatechange', arguments.callee);
                    fn();
                }
            });

            // 如果是IE且页面不在iframe中时，轮询调用doScroll 方法检测DOM是否加载完毕
            if(document.documentElement.doScroll && typeof window.frameElement === "undefined") {
                try{
                    document.documentElement.doScroll('left');
                }
                catch(error){
                    return setTimeout(arguments.callee, 20);
                };
                fn();
            }
        }
    }
}