快捷導(dǎo)航

JavaScript 事件屬性綁定帶參數(shù)的函數(shù)

更新時(shí)間：2009年03月13日 22:28:37 作者：

在JavaScript中，為了實(shí)現(xiàn)表現(xiàn)和控制相分離，可以通過0級的DOM事件屬性或者2級的事件模型來實(shí)現(xiàn)，不過這兩者在針對某個(gè)事件類型調(diào)用相應(yīng)的事件句柄的時(shí)候，不能給事件句柄提供參數(shù)，也就是說，事件屬性的值只能是一個(gè)函數(shù)引用。

例如不能采用這種調(diào)用方式：element.onclick = test();element.onclick = test(arg1,arg2);只能通過element.onclick = function(){ ... };或者element.onclick = test這種方式來實(shí)現(xiàn)，所以無法給函數(shù)傳遞參數(shù)。參考了大量的網(wǎng)上資料，解決這個(gè)問題的方式，以代碼為例，如下所示：

復(fù)制代碼代碼如下:

function Handler() { }; 
Handler.prototype = { 
/* 
* 把eventType類型的事件綁定到element元素，并使用handler事件句柄進(jìn)行處理 
* 兼容 IE 及 Firefox 等瀏覽器 
* 
* @param element 在其上注冊事件的對象（Object） 
* @param eventType 注冊的事件類型（String），不加“on” 
* @param handler 事件句柄（Function） 
*/ 
registerEvent : function(element, eventType, handler) { 
if(element.attachEvent) { //2級DOM的事件處理 
element.attachEvent('on'+ eventType, handler); 
}else if (element.addEventListener) { 
element.addEventListener(eventType, handler, false); 
} else { //0級DOM的事件處理 
element['on'+ eventType] = handler; 
} 
}, 
/* 
* 獲得帶參數(shù)的事件句柄的引用 
* 
* @param obj 需要綁定事件處理函數(shù)的所有者，null 表示 window 對象 
* @param func 需要綁定的事件處理函數(shù)名 
* @param ... 第三個(gè)參數(shù)開始為綁定事件處理函數(shù)的參數(shù)，由 0 到多個(gè)構(gòu)成 
*/ 
bind: function(obj, handler) { 
obj = obj || window; 
var args = []; 
for(var i =2; i < arguments.length; i++) 
{ 
args.push(arguments[i]); 
} 
return function() { handler.apply(obj, args) }; 
} 
} 
可能是使用方式為： 
function show(txtObj) { 
alert(txtObj.value); 
txtObj.focus(); 
txtObj.select(); 
} 
window.onload = function(){ 
var handler = new Handler(); 
handler.registerEvent($("txt"), "change", handler.bind(null,show,$("txt")));//采用2級事件模型的方式 
//$("txt").onchange = handler.bind(null,show,$("txt"));//JavaScript事件屬性的方式 
} 