在IE瀏覽器中添加或刪除事件用attachEvent、detachEvent。在其他標(biāo)準(zhǔn)瀏覽器中則用addEventListener、removeEventListener。下面的對事件的添加和刪除做了封裝。直接看代碼吧！

/**
* @description 事件綁定，兼容各瀏覽器
* @param target
* 事件觸發(fā)對象
* @param type
* 事件
* @param func
* 事件處理函數(shù)
*/
function bind(target, type, func) {
if (target.addEventListener) {// 非ie 和ie9
target.addEventListener(type, func, false);
} else if (target.attachEvent) { // ie6到ie8
target.attachEvent("on" + type, func);
} else {
target["on" + type] = func; // ie5
}
}
/**
* @description 事件移除，兼容各瀏覽器
* @param target
* 事件觸發(fā)對象
* @param type
* 事件
* @param func
* 事件處理函數(shù)
*/
function unbind(target, type, func) {
if (target.removeEventListener) {
target.removeEventListener(type, func, false);
} else if (target.detachEvent) {
target.detachEvent("on" + type, func);
} else {
target["on" + type] = null;
}
}

其他補(bǔ)充關(guān)于addEventListener第三個(gè)參數(shù)的含義

addEventListener的第三個(gè)參數(shù)

W3C DOM里用來新增觸發(fā)事件的函數(shù)叫AddEventListener，不過我一直不知道這個(gè)函數(shù)的第三個(gè)參數(shù)是要做什么用的，總是隨便設(shè)，也沒發(fā)現(xiàn)差異再哪，前兩天看ppk on javascript終于看到說明了，至于很久以前就有的DOM的標(biāo)準(zhǔn)文件，我其實(shí)根本沒去找過這個(gè)參數(shù)的資訊。

這個(gè)參數(shù)叫做useCapture，是一個(gè)boolean值，就是true or false，如果送出true的話就是瀏覽器會使用Capture方式，false的話是Bubbling，只有在特定狀況下才會有影響，通常建議是false，而會有影響的情形是目標(biāo)元素(target element)有祖先元素(ancestor element)，而且也有同樣的事件對應(yīng)函數(shù)，我想，看圖會比較清楚。

范例有兩層的div方塊

像這張圖所顯示的，我的范例有兩層div元素，而且都設(shè)定有click事件，一般來說，如果我在內(nèi)層藍(lán)色的元素上click不只會觸發(fā)藍(lán)色元素的click事件，還會同時(shí)觸發(fā)紅色元素的click事件，而useCapture這個(gè)參數(shù)就是在控制這時(shí)候兩個(gè)click事件的先后順序。如果是false，那就會使用bubbling，他是從內(nèi)而外的流程，所以會先執(zhí)行藍(lán)色元素的click事件再執(zhí)行紅色元素的click事件，如果是true，那就是capture，和bubbling相反是由外而內(nèi)，會先執(zhí)行紅色元素的click事件才執(zhí)行藍(lán)色元素的click事件。附上兩個(gè)范例，capture和bubbling，兩個(gè)檔案只有差在此一參數(shù)不同，可以發(fā)現(xiàn)事件的發(fā)生順序不一樣了。

那如果不同層的元素使用的useCapture不同呢？就是會先從最外層元素往目標(biāo)元素尋找設(shè)定為capture的事件，到達(dá)目標(biāo)元素執(zhí)行目標(biāo)元素的事件后，再尋原路往外尋找設(shè)定為bubbling的事件。

最新評論