搭建自己的base.js(1)

標籤：blog   java   使用   io   ar   問題   cti   div   

前言

從今天開始搭建自己的base.js，主要實現封裝各瀏覽器安全色函數及常用操作。

JS中，最常見的瀏覽器安全色問題估計就是事件相容問題了，比如擷取事件對象、綁定事件等，我們可以將這些相容函數放在一個全域對象EventUtil裡面，減少全域變數汙染，並保證隨時擴充。

事件綁定

在Firefox、Chrome等支援DOM2的瀏覽器中，綁定事件使用的方法是addEventListener(type,handler,useCapture)，三個參數分別表示事件類型、綁定事件的函數、是否在捕獲階段處理事件。

var btn1 = document.getElementById(‘btn1‘);btn1.addEventListener(‘click‘,function(){alert(‘ok‘);},false);

而在IE中，綁定事件使用的是attachEvent(type,handler)，兩個參數分別為事件類型、綁定事件的函數。由於IE8及以下版本只支援事件冒泡，所以綁定的事件都在事件冒泡階段。在IE綁定事件的函數中，範圍是全域的，也就是說在綁定的事件函數中，this表示window，可使用call函數改變this指向。還有一點要注意的是，用attachEvent綁定多個相同類型的事件，後綁定的會先觸發，這一點與DOM標準的剛好相反。

var btn1 = document.getElementById(‘btn1‘);btn1.attachEvent(‘onclick‘,function(){ //事件類型要加onalert(‘ok‘);
　　　　 alert(this);  //window});

　　綜上，相容的事件綁定及事件移除函數如下：

var EventUtil = {//綁定事件addHandler: function(element,type,handler) {if(element.addEventListener) {element.addEventListener(type,handler,false);  //DOM2級,為保證瀏覽器安全色，在冒泡階段處理事件} else if(element.attachEvent) {element.attachEvent(‘on‘+type,function(){  //IEhandler.call(element);  //修複IE中的this指向});  } else {element[‘on‘ + type] = handler;  //DOM0級}},// 解除事件綁定removeHandler:function(element,type,handler) {if(element.removeEventListener) {element.removeEventListener(type,handler,false);  //DOM2} else if(element.detachEvent) {element.detachEvent(‘on‘+type, handler);  //IE} else {element[‘on‘+type] = null;  //DOM0}}}

　　注意：綁定匿名函數的事件無法移除，因為綁定事件的解除綁定的參數必須完全一樣才能解除，可以將代碼用函數封裝，傳遞函數的引用給事件函數。如以下代碼先綁定後移除，點擊沒有反應：

function test() {alert(‘test‘);}EventUtil.addHandler(document,‘click‘,test);EventUtil.removeHandler(document,‘click‘,test);