欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript 自定義事件初探

 更新時(shí)間:2009年08月21日 01:33:59   作者:  
"事件機(jī)制可以使程序邏輯更加符合現(xiàn)實(shí)世界,在JavaScript 中很多對(duì)象都有自己的事件,例如按鈕就有onclick 事件,下拉列表框就有onchange 事件,通過這些事件可以方便編程。
還有,“通過事件機(jī)制,可以將類設(shè)計(jì)為獨(dú)立的模塊,通過事件對(duì)外通信,提高了程序的開發(fā)效率?!?。相信C#程序員對(duì)事件的好處是深有體會(huì)的。好了,Code is cheap.看代碼:
function class1() { // 最簡(jiǎn)單的事件設(shè)計(jì)模式
}
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 用于存儲(chǔ)傳遞給事件處理程序的參數(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();
}

"因?yàn)槭录C(jī)制僅傳遞一個(gè)函數(shù)的名稱,不帶有任何參數(shù)的信息,所以無法傳遞參數(shù)進(jìn)去",這是后話了,“要解決這個(gè)問題,可以從相反的思路去考慮,不考慮怎么把參數(shù)傳進(jìn)去,而是考慮如何構(gòu)建一個(gè)無需參數(shù)的事件處理程序,該程序是根據(jù)有參數(shù)的事件處理程序創(chuàng)建的,是一個(gè)外層的封裝?!?,這里的“該程序”就是 createFunction函數(shù),它巧妙地利用apply函數(shù)將帶參數(shù)的函數(shù)封裝為無參數(shù)函數(shù)。最后我們看看如何實(shí)現(xiàn)自定義事件的多綁定:
// 使自定義事件支持多綁定
// 將有參數(shù)的函數(shù)封裝為無參數(shù)的函數(shù)
function createFunction(obj, strFunc) {
var args = []; // 定義args 用于存儲(chǔ)傳遞給事件處理程序的參數(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方法實(shí)現(xiàn)的基本思想是對(duì)數(shù)組的push操作,其實(shí)我們還可以在事件執(zhí)行完成之后,移除事件處理函數(shù),下面單獨(dú)實(shí)現(xiàn):
// 將有參數(shù)的函數(shù)封裝為無參數(shù)的函數(shù)
function createFunction(obj, strFunc) {
var args = []; // 定義args 用于存儲(chǔ)傳遞給事件處理程序的參數(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(); // 移除一個(gè),顯示剩余的一個(gè)
obj.detachOnShow(createFunction( null , " objOnShow2 " , " test message " ));
obj.show(); // 兩個(gè)都移除,一個(gè)也不顯示
}
關(guān)于自定義事件的學(xué)習(xí)先到這里。

相關(guān)文章

最新評(píng)論