JavaScript中自定義事件用法分析
本文實例講述了JavaScript中自定義事件用法。分享給大家供大家參考。具體分析如下：
在web前端開發(fā)中，很多人可能不會用到js的自定義事件，但如果是做一個相對來說比較大的項目，尤其是多人協(xié)同開發(fā)的時候，自定義事件就顯得很重要了。那么，什么是js中的自定義事件呢？我們先來看一個例子：
前端開發(fā)員A封裝了一個函數：
alert(a); //以此來代表N行代碼
}
過段時間，前端開發(fā)員B要在A的基礎上豐富這個函數，于是，他會這樣寫：
alert(a); //以此來代表N行代碼
alert(b); //以此來代表N行代碼
}
是不是發(fā)現(xiàn)了問題，B要注意和A的變量、函數等等的命名和沖突問題，又過段時間，前端開發(fā)員C也要豐富這個函數，于是：
alert(a); //以此來代表N行代碼
alert(b); //以此來代表N行代碼
alert(c); //以此來代表N行代碼
}
這時候會很令人抓狂了，C寫起代碼來我敢肯定不會很輕松。解決這個問題的方法就是通過自定義事件，我們知道一個元素身上可以添加相同的事件而不會各自影響，如：
alert(1);
} ,false);
window.addEventListener('click',function(){
alert(2);
} ,false);
點擊頁面的時候，1和2都會彈出，那么我們就可以用這種方法來定義我們的函數：
alert(3);
} ,false);
window.addEventListener('move',function(){
alert(4);
} ,false);
這樣，我們執(zhí)行move();的時候就會彈出3和4，這里的move就是自定義事件，它其實就是一個函數
下面看看如何給事件處理程序傳遞參數：
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();
}
"因為事件機制僅傳遞一個函數的名稱，不帶有任何參數的信息，所以無法傳遞參數進去",這是后話了，“要解決這個問題，可以從相反的思路去考慮，不考慮怎么把參數傳進去，而是考慮如何構建一個無需參數的事件處理程序，該程序是根據有參數的事件處理程序創(chuàng)建的，是一個外層的封裝。”，這里的“該程序”就是createFunction函數，它巧妙地利用apply函數將帶參數的函數封裝為無參數函數。最后我們看看如何實現(xiàn)自定義事件的多綁定：
//將有參數的函數封裝為無參數的函數
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);
}
}
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)的基本思想是對數組的push操作，其實我們還可以在事件執(zhí)行完成之后，移除事件處理函數，下面單獨實現(xiàn)：
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);
},
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(); // 兩個都移除，一個也不顯示
}
希望本文所述對大家的javascript程序設計有所幫助。
相關文章
基于JavaScript實現(xiàn)全屏透明遮罩div層鎖屏效果
這篇文章主要介紹了基于JavaScript實現(xiàn)全屏透明遮罩div層鎖屏效果的相關資料,需要的朋友可以參考下2016-01-01
基于JavaScript實現(xiàn)高德地圖和百度地圖提取行政區(qū)邊界經緯度坐標
本文給大家介紹javascript實現(xiàn)高德地圖和百度地圖提取行政區(qū)邊界經緯度坐標的相關知識，本文實用性非常高，代碼簡單易懂，需要的朋友參考下吧2016-01-01
bootstrap配合Masonry插件實現(xiàn)瀑布式布局
這篇文章主要為大家詳細介紹了bootstrap配合Masonry插件實現(xiàn)瀑布式布局，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要為大家詳細介紹了uniapp微信小程序實現(xiàn)一個頁面多個倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
three.js 實現(xiàn)露珠滴落動畫效果的示例代碼
這篇文章主要介紹了three.js 實現(xiàn)露珠滴落動畫效果的示例代碼,非常不錯，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
這篇文章主要為大家詳細介紹了ionic實現(xiàn)可滑動的tab選項卡切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)拉鏈式的滑動驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要為大家詳細介紹了js canvas實現(xiàn)五子棋小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要介紹了JS匿名函數類生成方式,結合實例形式分析了javascript匿名函數類相關屬性與方法定義與使用技巧,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了JavaScript判斷瀏覽器類型的方法,可實現(xiàn)針對IE、火狐、谷歌等瀏覽器的判斷,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02