javascript 自定義事件初探
2024-05-06 14:14:18
供稿：網友
還有，“通過事件機制，可以將類設計為獨立的模塊，通過事件對外通信，提高了程序的開發效率?！薄Ｏ嘈臗#程序員對事件的好處是深有體會的。好了，Code is cheap.看代碼：
function class1() { // 最簡單的事件設計模式
}
class1.prototype = {
show: function () {
this .onShow();
},
onShow: function () { }
}
function test() {
var obj = new class1();
obj.onShow = function () {
alert( " test " );
}
obj.show();
}
下面看看如何給事件處理程序傳遞參數：
// 將有參數的函數封裝為無參數的函數
function createFunction(obj, strFunc) {
var args = []; // 定義args 用于存儲傳遞給事件處理程序的參數
if ( ! obj) obj = window; // 如果是全局函數則obj=window;
// 得到傳遞給事件處理程序的參數
for ( var i = 2 ; i < arguments.length; i ++ ) args.push(arguments[i]);
// 用無參數函數封裝事件處理程序的調用
return function () {
obj[strFunc].apply(obj, args); // 將參數傳遞給指定的事件處理程序
}
}
function class1() {
}
class1.prototype = {
show: function () {
this .onShow();
},
onShow: function () { }
}
function objOnShow(userName) {
alert( " hello, " + userName);
}
function test() {
var obj = new class1();
var userName = " test " ;
obj.onShow = createFunction( null , " objOnShow " , userName);
obj.show();
}
"因為事件機制僅傳遞一個函數的名稱，不帶有任何參數的信息，所以無法傳遞參數進去",這是后話了，“要解決這個問題，可以從相反的思路去考慮，不考慮怎么把參數傳進去，而是考慮如何構建一個無需參數的事件處理程序，該程序是根據有參數的事件處理程序創建的，是一個外層的封裝。”，這里的“該程序”就是 createFunction函數，它巧妙地利用apply函數將帶參數的函數封裝為無參數函數。最后我們看看如何實現自定義事件的多綁定：
// 使自定義事件支持多綁定
// 將有參數的函數封裝為無參數的函數
function createFunction(obj, strFunc) {
var args = []; // 定義args 用于存儲傳遞給事件處理程序的參數
if ( ! obj) obj = window; // 如果是全局函數則obj=window;
// 得到傳遞給事件處理程序的參數
for ( var i = 2 ; i < arguments.length; i ++ ) args.push(arguments[i]);
// 用無參數函數封裝事件處理程序的調用
return function () {
obj[strFunc].apply(obj, args); // 將參數傳遞給指定的事件處理程序
}
}
function class1() {
}
class1.prototype = {
show: function () {
if ( this .onShow) {
for ( var i = 0 ; i < this .onShow.length; i ++ ) {
this .onShow[i]();
}
}
},
attachOnShow: function (_eHandler) {
if ( ! this .onShow) { this .onShow = []; }
this .onShow.push(_eHandler);
}
}
