|
|
function class1() { // 最簡單的事件設(shè)計模式
}
class1.prototype = {
show: function () {
this .onShow();
},
onShow: function () { }
}
function test() {
var obj = new class1();
obj.onShow = function () {
alert( " test " );
}
obj.show();
}
下面看看如何給事件處理程序傳遞參數(shù)：
// 將有參數(shù)的函數(shù)封裝為無參數(shù)的函數(shù)
function createFunction(obj, strFunc) {
var args = []; // 定義args 用于存儲傳遞給事件處理程序的參數(shù)
if ( ! obj) obj = window; // 如果是全局函數(shù)則obj=window;
// 得到傳遞給事件處理程序的參數(shù)
for ( var i = 2 ; i < arguments.length; i ++ ) args.push(arguments[i]);
// 用無參數(shù)函數(shù)封裝事件處理程序的調(diào)用
return function () {
obj[strFunc].apply(obj, args); // 將參數(shù)傳遞給指定的事件處理程序
}
}
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();
}
"因為事件機制僅傳遞一個函數(shù)的名稱，不帶有任何參數(shù)的信息，所以無法傳遞參數(shù)進去",這是后話了，“要解決這個問題，可以從相反的思路去考慮，不考慮怎么把參數(shù)傳進去，而是考慮如何構(gòu)建一個無需參數(shù)的事件處理程序，該程序是根據(jù)有參數(shù)的事件處理程序創(chuàng)建的，是一個外層的封裝。”，這里的“該程序”就是 createFunction函數(shù)，它巧妙地利用apply函數(shù)將帶參數(shù)的函數(shù)封裝為無參數(shù)函數(shù)。最后我們看看如何實現(xiàn)自定義事件的多綁定：
// 使自定義事件支持多綁定
// 將有參數(shù)的函數(shù)封裝為無參數(shù)的函數(shù)
function createFunction(obj, strFunc) {
var args = []; // 定義args 用于存儲傳遞給事件處理程序的參數(shù)
if ( ! obj) obj = window; // 如果是全局函數(shù)則obj=window;
// 得到傳遞給事件處理程序的參數(shù)
for ( var i = 2 ; i < arguments.length; i ++ ) args.push(arguments[i]);
// 用無參數(shù)函數(shù)封裝事件處理程序的調(diào)用
return function () {
obj[strFunc].apply(obj, args); // 將參數(shù)傳遞給指定的事件處理程序
}
}
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);
}
}
function objOnShow(userName) {
alert( " hello, " + userName);
}
function objOnShow2(testName) {
alert( " show: " + testName);
}
function test() {
var obj = new class1();
var userName = " your name " ;
obj.attachOnShow(createFunction( null , " objOnShow " , userName));
obj.attachOnShow(createFunction( null , " objOnShow2 " , " test message " ));
obj.show();
}
我們看到，attachOnShow方法實現(xiàn)的基本思想是對數(shù)組的push操作，其實我們還可以在事件執(zhí)行完成之后，移除事件處理函數(shù)，下面單獨實現(xiàn)：
// 將有參數(shù)的函數(shù)封裝為無參數(shù)的函數(shù)
function createFunction(obj, strFunc) {
var args = []; // 定義args 用于存儲傳遞給事件處理程序的參數(shù)
if ( ! obj) obj = window; // 如果是全局函數(shù)則obj=window;
// 得到傳遞給事件處理程序的參數(shù)
for ( var i = 2 ; i < arguments.length; i ++ ) args.push(arguments[i]);
// 用無參數(shù)函數(shù)封裝事件處理程序的調(diào)用
return function () {
obj[strFunc].apply(obj, args); // 將參數(shù)傳遞給指定的事件處理程序
}
}
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);
},
detachOnShow: function (_eHandler) { // 移除事件
if ( ! this .onShow) { this .onShow = []; }
this .onShow.pop(_eHandler);
}
}
function objOnShow(userName) {
alert( " hello, " + userName);
}
function objOnShow2(testName) {
alert( " show: " + testName);
}
function test() {
var obj = new class1();
var userName = " your name " ;
obj.attachOnShow(createFunction( null , " objOnShow " , userName));
obj.attachOnShow(createFunction( null , " objOnShow2 " , " test message " ));
obj.show();
obj.detachOnShow(createFunction( null , " objOnShow " , userName));
obj.show(); // 移除一個，顯示剩余的一個
obj.detachOnShow(createFunction( null , " objOnShow2 " , " test message " ));
obj.show(); // 兩個都移除，一個也不顯示
}
關(guān)于自定義事件的學(xué)習(xí)先到這里。
JavaScript技術(shù)：javascript 自定義事件初探，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
