經常使用原生JS兼容寫法

在咱們前端開發中,常常會遇到兼容性的問題,由於要考慮用戶會使用不一樣的瀏覽器來訪問你的頁面,你要保證你作的網頁在任何一個瀏覽器中都能正常的運行,下面我就舉幾個經常使用原生JS的兼容寫法:

1:添加事件方法

addHandler：function(element,type,handler){

  if (element.addEventListener){ //檢測是否爲DOM2級方法

   element.addEventListener(type, handler, false );

  } else if (element.attachEvent){ //檢測是否爲IE級方法

   element.attachEvent( "on" + type, handler);

  } else { //檢測是否爲DOM0級方法

   element[ "on" + type] = handler;

  };

};

2:獲取事件及事件對象目標

  getEvent: function (event){

   return event ? event : window.event;

  },

  getTarget: function (event){

   return event.target || event.srcElement;

  };

3:阻止瀏覽器默認事件的兼容性寫法

preventDefault: function (event){

   if (event.preventDefault){

    event.preventDefault();

   } else {

    event.returnValue = false ;

   };

  };

4:阻止事件冒泡的兼容性寫法

stopPropagation: function (event){

   if (event.stopPropagation){

    event.stopPropagation();

   } else {

    event.cancelBubble = true ;

   };

  };

5:跨瀏覽器的方式取得字符編碼

getCharCode: function (event){

  if ( typeof event.charCode == "number" ){

   return event.charCode;

  } else {

   return event.keyCode;

  };

};

基本原生JS中兼容性問題我能想起來的也就這麼多了,但願對你們的學習有幫助.

另外多加一個CSS3中兼容性寫法

　　　-webkit這個爲瀏覽器的前綴表明瀏覽器的私有屬性
        -ms 這是IE瀏覽器的前綴
        -moz 這表明了火狐瀏覽器的前綴
        -o  這表明着歐朋瀏覽器
        -webkit  這表明了谷歌瀏覽器和蘋果瀏覽器

今天就先寫到這裏了,明天見!

 

 

 

堅持!堅持!堅持!堅持!堅持!