JavaScript中自定義事件用法分析
本文實(shí)例講述了JavaScript中自定義事件用法。分享給大家供大家參考。具體分析如下：
在web前端開發(fā)中，很多人可能不會(huì)用到j(luò)s的自定義事件，但如果是做一個(gè)相對(duì)來說比較大的項(xiàng)目，尤其是多人協(xié)同開發(fā)的時(shí)候，自定義事件就顯得很重要了。那么，什么是js中的自定義事件呢？我們先來看一個(gè)例子：
前端開發(fā)員A封裝了一個(gè)函數(shù)：
alert(a); //以此來代表N行代碼
}
過段時(shí)間，前端開發(fā)員B要在A的基礎(chǔ)上豐富這個(gè)函數(shù)，于是，他會(huì)這樣寫：
alert(a); //以此來代表N行代碼
alert(b); //以此來代表N行代碼
}
是不是發(fā)現(xiàn)了問題，B要注意和A的變量、函數(shù)等等的命名和沖突問題，又過段時(shí)間，前端開發(fā)員C也要豐富這個(gè)函數(shù)，于是：
alert(a); //以此來代表N行代碼
alert(b); //以此來代表N行代碼
alert(c); //以此來代表N行代碼
}
這時(shí)候會(huì)很令人抓狂了，C寫起代碼來我敢肯定不會(huì)很輕松。解決這個(gè)問題的方法就是通過自定義事件，我們知道一個(gè)元素身上可以添加相同的事件而不會(huì)各自影響，如：
alert(1);
} ,false);
window.addEventListener('click',function(){
alert(2);
} ,false);
點(diǎn)擊頁面的時(shí)候，1和2都會(huì)彈出，那么我們就可以用這種方法來定義我們的函數(shù)：
alert(3);
} ,false);
window.addEventListener('move',function(){
alert(4);
} ,false);
這樣，我們執(zhí)行move();的時(shí)候就會(huì)彈出3和4，這里的move就是自定義事件，它其實(shí)就是一個(gè)函數(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)：
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è)也不顯示
}
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
用director.js實(shí)現(xiàn)前端路由使用實(shí)例
本篇文章主要介紹了director.js實(shí)現(xiàn)前端路由，在不刷新的情況下，利用“#”號(hào)組織不同的URL路徑，并根據(jù)不同的URL路徑進(jìn)行不同的方法調(diào)用。有興趣的了解一下。2017-01-01
JS實(shí)現(xiàn)獲取當(dāng)前URL和來源URL的方法
這篇文章主要介紹了JS實(shí)現(xiàn)獲取當(dāng)前URL和來源URL的方法,涉及javascript針對(duì)頁面document屬性操作的相關(guān)技巧,需要的朋友可以參考下2016-08-08
javascript對(duì)數(shù)組的常用操作代碼 數(shù)組方法總匯
js下數(shù)組也是比較常用的，對(duì)數(shù)組元素的處理也是有非常多的方法，這里整理了下，需要的朋友可以參考下。2011-01-01
某些正則表達(dá)式模式可能容易受到回溯的影響,這可能會(huì)導(dǎo)致超線性運(yùn)行時(shí),并可能導(dǎo)致DoS攻擊,本文就來介紹一下如何防止JavaScript中的正則表達(dá)式回溯,感興趣的可以了解一下2023-08-08
現(xiàn)在有一段12行的JavaScript代碼，可以讓firefox、chrome、safari瀏覽器崩潰，而且還能讓iphone重啟、安卓閃退，本文作者對(duì)于該12行代碼進(jìn)行了分析解讀并且提出了相應(yīng)的防御辦法，歡迎大家一同探討。有需要的朋友們可以參考借鑒。2016-10-10
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
這篇文章主要介紹了js焦點(diǎn)文字滾動(dòng)效果，功能實(shí)現(xiàn)非常簡單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
JavaScript實(shí)現(xiàn)帶標(biāo)題的圖片輪播特效
這里給大家分享的是4屏帶標(biāo)題和文字描述的js圖片輪播代碼，完美兼容IE6。圖片滾動(dòng)切換，鼠標(biāo)放到數(shù)字選項(xiàng)卡即可切換圖片。點(diǎn)擊圖片跳轉(zhuǎn)到指定頁面，有需要的小伙伴可以參考下。2015-05-05
原生js實(shí)現(xiàn)數(shù)字字母混合驗(yàn)證碼的簡單實(shí)例
這篇文章主要介紹了原生js實(shí)現(xiàn)數(shù)字字母混合驗(yàn)證碼的簡單實(shí)例，注釋很詳細(xì)，感興趣的小伙伴們可以參考一下2015-12-12
在javascript中，帶小數(shù)的數(shù)據(jù)運(yùn)算時(shí)總會(huì)出現(xiàn)好多位小數(shù).這是因?yàn)樵趈avascript中浮點(diǎn)數(shù)的計(jì)算是以2進(jìn)制計(jì)算的2014-05-05