javascript 自定義事件初探
更新時間:2009年08月21日 01:33:59 作者:
"事件機制可以使程序邏輯更加符合現(xiàn)實世界,在JavaScript 中很多對象都有自己的事件,例如按鈕就有onclick 事件,下拉列表框就有onchange 事件,通過這些事件可以方便編程。
還有,“通過事件機制,可以將類設(shè)計為獨立的模塊,通過事件對外通信,提高了程序的開發(fā)效率?!薄O嘈臗#程序員對事件的好處是深有體會的。好了,Code is cheap.看代碼:
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)于自定義事件的學習先到這里。
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)于自定義事件的學習先到這里。
相關(guān)文章
僅img元素創(chuàng)建后不添加到文檔中會執(zhí)行onload事件的解決方法
僅img元素創(chuàng)建后不添加到文檔中會執(zhí)行onload事件的解決方法,需要的朋友可以參考下。2011-07-07
JavaScript綁定事件監(jiān)聽函數(shù)的通用方法
這篇文章主要為大家詳細介紹了JavaScript綁定事件監(jiān)聽函數(shù)的通用方法,感興趣的朋友可以參考一下2016-05-05
Electron 使? electron-builder 打包應用過程詳解
Electron應用開發(fā)中,electron-builder是一個常用的打包工具,提供了多種自定義配置,不過,使用npm安裝electron-builder時可能會遇到下載依賴慢或失敗的問題,本文給大家介紹Electron 使? electron-builder 打包應用的相關(guān)操作,感興趣的朋友一起看看吧2024-10-10

