在調(diào)用javascript時，經(jīng)常會遇到不同瀏覽器之間的兼容性問題，這也是javascript開發(fā)中比較棘手的一個問題。然而，在開發(fā)中使用javascript event事件時，我們可以采用一種比較萬能的寫法，以解決不同瀏覽器之間的兼容性問題。

在介紹萬能兼容寫法之前，我們先來看一下常規(guī)寫法。以事件綁定為例，常規(guī)寫法如下：

var ele = document.getElementById('demo');
if(ele.addEventListener){    //現(xiàn)代瀏覽器支持addEventListener方法
ele.addEventListener('click', myFunction, false);
}else if(ele.attachEvent){    //IE瀏覽器支持attachEvent方法
ele.attachEvent('onclick', myFunction);
}

這種寫法是一種常規(guī)兼容寫法，可以解決大部分瀏覽器之間的兼容性問題。但是，隨著不同瀏覽器之間兼容性問題的不斷出現(xiàn)，這種常規(guī)寫法也開始不夠普適。這時可以采用下面這種萬能寫法：

function addEvent(ele, type, handler){
if(ele.addEventListener){
ele.addEventListener(type, handler, false);
}else if(ele.attachEvent){
ele.attachEvent('on'+type, handler);
}else{
ele['on'+type] = handler;
}
}

通過定義一個addEvent函數(shù)，我們可以靈活的在項目中調(diào)用，以解決瀏覽器之間的兼容性問題。該函數(shù)支持傳入三個參數(shù)，分別是元素、事件類型和事件處理程序。下面我們來看幾個實例。

例一：

var ele = document.getElementById('demo');
addEvent(ele, 'click', function(){
alert('hello world');
});

在上面的例子中，我們調(diào)用了addEvent函數(shù)，可以在click事件觸發(fā)時彈出彈框，實現(xiàn)了事件綁定的功能。

例二：

var ele = document.getElementById('demo');
addEvent(ele, 'click', function(){
//...
});
addEvent(ele, 'mouseover', function(){
//...
});

在上面的例子中，我們調(diào)用了兩次addEvent函數(shù)，實現(xiàn)了對元素的click和mouseover事件綁定。

例三：

var ele = document.getElementById('demo');
var fn = function(){
alert('hello world');
};
addEvent(ele, 'click', fn);
addEvent(ele, 'click', fn);
addEvent(ele, 'click', fn);

在上面的例子中，我們定義了一個變量fn表示事件處理程序，然后通過三次調(diào)用addEvent函數(shù)，實現(xiàn)了對click事件的三個事件處理程序的綁定。這種寫法與常規(guī)寫法的區(qū)別在于，常規(guī)寫法無法同時綁定多個事件處理程序。

萬能兼容寫法的優(yōu)點在于代碼簡潔易懂，支持更多的瀏覽器，具有很好的移植性。因此，建議在開發(fā)中盡量采用該種方式實現(xiàn)事件的綁定。