js新增事件/移除事件/阻止冒泡/阻止瀏覽器預設行為寫法(相容IE/FF/CHROME)

1.新增事件

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].call(obj, window.event);
      } );
  }
};
 

2.移除事件

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;
  }
};

3.阻止事件(包括冒泡和預設行為)

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();
  }
}

僅阻止瀏覽器預設行為

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

4.取得事件源物件

var getEventTarget = function(e){
   e = e || window.event;
  var target = event.srcElement ? event.srcElement : event.target;
  return target;
}

附：繫結onpropertychange事件

onpropertychange，它在一個元素的屬性發生變化的時候觸發，一般用在表單元素中捕獲其value值改變，它比onchange事件更實時捕獲它的改變，不過為微軟私有事件。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);
  }
}