2015年7月

javascript处理事件的一些兼容写法

绑定事件

var addEvent = function( obj, type, fn ) {
    if (obj.addEventListener)
        obj.addEventListener( type, fn, false );
    else if (obj.attachEvent) {
        obj["e"+type+fn] = fn;
        obj.attachEvent( "on"+type, function() {
            obj["e"+type+fn]();
        } );
    }
};

另一个实现

var addEvent = (function () { 
    if (document.addEventListener) { 
        return function (el, type, fn) { 
            el.addEventListener(type, fn, false); 
        }; 
    } else { 
        return function (el, type, fn) { 
            el.attachEvent('on' + type, function () { 
                return fn.call(el, window.event); 
            }); 
        } 
    } 
})();

绑定onpropertychange事件

onpropertychange是微软制造的一个事件,它在一个元素的属性发生变化的时候触发,常见的有文本的长度改变,样长改变等,FF大致和它相似的属性为oninput事件,不过它只针对textfield与textarea的value属性。safari,firefox,chrome与opera都支持此属性。

var addPropertyChangeEvent = function (obj,fn) {
    if(window.ActiveXObject){
        obj.onpropertychange = fn;
    }else{
        obj.addEventListener("input",fn,false);
    }
}

移除事件

var removeEvent = function( obj, type, fn ) {
    if (obj.removeEventListener)
        obj.removeEventListener( type, fn, false );
    else if (obj.detachEvent) {
        obj.detachEvent( "on"+type, obj["e"+type+fn] );
        obj["e"+type+fn] = null;
    }
};

加载事件

var loadEvent = function(fn) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = fn;
    }else {
        window.onload = function() {
            oldonload();
            fn();
        }
    }
}

阻止事件

var  stopEvent = function(e){
      e = e || window.event;
      if(e.preventDefault) {
        e.preventDefault();
        e.stopPropagation();
      }else{
        e.returnValue = false;
        e.cancelBubble = true;
      }
    }

如果仅仅是阻止事件冒泡

var stopPropagation = function(e) {
     e = e || window.event;
    if (!+"\v1") {
       e.cancelBubble = true;        
    } else {
       e.stopPropagation();
    }
}

取得事件源对象

相当于Prototype.js框架的Event.element(e)

var getEvent = function(e){
     e = e || window.event;
    return  event.target || event.srcElement
}
function getEvent() {
    if (window.event) return window.event;
    var c = getEvent.caller;
    while (c.caller) c = c.caller;
    return c.arguments[0];
} 

或者这个功能更强大,我在开发datagrid时开发出来的,详细用法见《一步步教你实现表格排序(第二部分)》。

var getEvent = function(e) {
  var e = e || window.event;
  if (!e) {
    var c = this.getEvent.caller;
    while (c) {
      e = c.arguments[0];
      if (e && (Event == e.constructor || MouseEvent  == e.constructor)) {
        break;
      }
      c = c.caller;
    }
  }
  var target = e.srcElement ? e.srcElement : e.target,
  currentN = target.nodeName.toLowerCase(),
  parentN  = target.parentNode.nodeName.toLowerCase(),
  grandN = target.parentNode.parentNode.nodeName.toLowerCase();
  return [e,target,currentN,parentN,grandN];
}

javascript 的forEach函数

在Base2中找到一个叫forEach的函数,是我见过的最好的实现。挖出来分析一下。它能对各种普通对象,字符串,数组以及类数组进行遍历。如果原游览器的对象已实现此函数,它则调用原对象的函数。

function forEach(object, block, context, fn) {
  if (object == null) return;
  if (!fn) {
    if (typeof object == "function" && object.call) {
      //遍历普通对象
      fn = Function;
    } else if (typeof object.forEach == "function" && object.forEach != arguments.callee) {
      //如果目标已经实现了forEach方法,则使用它自己的forEach方法(如标准游览器的Array对象)
      object.forEach(block, context);
      return;
    } else if (typeof object.length == "number") {
      // 如果是类数组对象或IE的数组对象
      _Array_forEach(object, block, context);
      return;
    }
  }
  _Function_forEach(fn || Object, object, block, context);
};
 
function _Array_forEach(array, block, context) {
  if (array == null) return;
  var i = 0,length = array.length;
  if (typeof array == "string") {
    for (; i < length; i++) {
      block.call(context, array.charAt(i), i, array);
    }
  }else{
    for (;i < length; i++) {
      block.call(context, array[i], i, array);
    }
  }
};
 
 
  _Function_forEach = function(fn, object, block, context) {
    // 这里的fn恒为Function
    for (var key in object) {
       //只遍历本地属性
       if (object.hasOwnProperty(key)) {
        //相当于  block(object[key], key)
        block.call(context, object[key], key, object);
      }
    }
  };