js添加事件、移除事件、阻止冒泡、阻止瀏覽器默認行爲等寫法(兼容IE/FF/CHROME)

網上有關這方面的代碼比較多而亂,這裏整理一下並加以改進。

添加事件

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

移除事件

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

取得事件源對象

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);
  }
}
相關文章
相關標籤/搜索