js事件模型與自定義事件實(shí)例解析
JavaScript 一個(gè)最簡(jiǎn)單的事件模型,需要有事件綁定與觸發(fā),還有事件刪除。
var eventModel = {
list: {},
bind: function () {
var args = [].slice.call(arguments),
type = args[0],
handlers = args.slice(1);
if (typeof type === 'string' && handlers.length > 0) {
for (var i = 0; i < handlers.length; i++) {
if (typeof handlers[i] === 'function') {
if (!this.list[type]) {
this.list[type] = [];
}
this.list[type].push(handlers[i]);
}
}
}
},
unbind: function () {
var type = arguments[0],
handlers = Array.prototype.slice.call(arguments, 1);
if (typeof type === 'string') {
if (handlers.length === 0) {
this.list[type] = [];
} else {
for (var i = 0; i < handlers.length; i++) {
if (typeof handlers[i] === 'function' && handlers[i] === this.list[type][i]) {
this.list[type].splice(i, 1);
}
}
}
}
},
trigger: function () {
var arguments = [].slice.call(arguments),
type = arguments[0],
args = arguments[1] instanceof Array && !arguments[2] ? arguments[1] : arguments.slice(1),
handlers = this.list[type];
for (var i = 0; i < handlers.length; i++) {
handlers[i].apply(this, args.splice(0, handlers[i].length));
}
}
};
其中主要實(shí)現(xiàn)了bind(綁定事件)、unbind(刪除事件)與 trigger (觸發(fā)事件)。對(duì)同一事件名稱(chēng),可以綁定多個(gè)事件處理函數(shù);并按照綁定的順序依次觸發(fā)。
args.splice(0, handlers[i].length) 觸發(fā)時(shí)的傳參
事件綁定與觸發(fā):
eventModel.bind('myevent1', function (a) {
console.log(a); // 1
}, function(b) {
console.log(b); // 2
}, function(c, d) {
console.log(c + ' + ' + d); // a + b
});
eventModel.bind('myevent1', function (e) {
console.log(e); // 50
});
eventModel.trigger('myevent1', 1,2,'a','b', 50);
事件刪除:
<button id="bind">bind</button> <button id="unbind">unbind</button>
var fnX = function () {
console.log('fnX');
}
var fnY = function () {
console.log('fnY');
}
eventModel.bind('myevent2', fnX, fnY);
document.getElementById('unbind').onclick = function () {
eventModel.unbind('myevent2', fnX); //刪除 fnX 后,只剩下 fnY
};
document.getElementById('bind').onclick = function () {
eventModel.trigger('myevent2'); //輸出 fnX fnY
//在點(diǎn)擊unbind后,只輸出 fnY
};
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
C#解析char型指針?biāo)赶虻膬?nèi)容(實(shí)例解析)
在c++代碼中定義了一個(gè)功能函數(shù),這個(gè)功能函數(shù)會(huì)將計(jì)算的結(jié)果寫(xiě)入一個(gè)字符串型的數(shù)組中output,然后c#會(huì)調(diào)用c++導(dǎo)出的dll中的接口函數(shù),然后獲取這個(gè)output并解析成string類(lèi)型,本文通過(guò)實(shí)例解析C#?char型指針?biāo)赶虻膬?nèi)容,感興趣的朋友一起看看吧2024-03-03
詳解.NET 6如何實(shí)現(xiàn)獲取當(dāng)前登錄用戶信息
這篇文章主要介紹了.NET 6在應(yīng)用開(kāi)發(fā)時(shí)是如何實(shí)現(xiàn)當(dāng)前登陸用戶信息獲取的,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解一下2022-01-01
C#寫(xiě)入對(duì)象或集合類(lèi)型數(shù)據(jù)到xml文件的方法
這篇文章主要介紹了C#寫(xiě)入對(duì)象或集合類(lèi)型數(shù)據(jù)到xml文件的方法,涉及C#針對(duì)XML文件的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
DevExpress實(shí)現(xiàn)TreeList父子節(jié)點(diǎn)CheckState狀態(tài)同步的方法
這篇文章主要介紹了DevExpress實(shí)現(xiàn)TreeList父子節(jié)點(diǎn)CheckState狀態(tài)同步的方法,需要的朋友可以參考下2014-08-08
C#數(shù)據(jù)表格(DataGridView)控件的應(yīng)用案例
這篇文章主要介紹了C#數(shù)據(jù)表格(DataGridView)控件的應(yīng)用案例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03

