js事件模型與自定義事件實(shí)例解析
JavaScript 一個(gè)最簡單的事件模型,需要有事件綁定與觸發(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ì)同一事件名稱,可以綁定多個(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 };
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
C#解析char型指針?biāo)赶虻膬?nèi)容(實(shí)例解析)
在c++代碼中定義了一個(gè)功能函數(shù),這個(gè)功能函數(shù)會(huì)將計(jì)算的結(jié)果寫入一個(gè)字符串型的數(shù)組中output,然后c#會(huì)調(diào)用c++導(dǎo)出的dll中的接口函數(shù),然后獲取這個(gè)output并解析成string類型,本文通過實(shí)例解析C#?char型指針?biāo)赶虻膬?nèi)容,感興趣的朋友一起看看吧2024-03-03詳解.NET 6如何實(shí)現(xiàn)獲取當(dāng)前登錄用戶信息
這篇文章主要介紹了.NET 6在應(yīng)用開發(fā)時(shí)是如何實(shí)現(xiàn)當(dāng)前登陸用戶信息獲取的,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解一下2022-01-01C#寫入對(duì)象或集合類型數(shù)據(jù)到xml文件的方法
這篇文章主要介紹了C#寫入對(duì)象或集合類型數(shù)據(jù)到xml文件的方法,涉及C#針對(duì)XML文件的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07DevExpress實(shí)現(xiàn)TreeList父子節(jié)點(diǎn)CheckState狀態(tài)同步的方法
這篇文章主要介紹了DevExpress實(shí)現(xiàn)TreeList父子節(jié)點(diǎn)CheckState狀態(tài)同步的方法,需要的朋友可以參考下2014-08-08C#數(shù)據(jù)表格(DataGridView)控件的應(yīng)用案例
這篇文章主要介紹了C#數(shù)據(jù)表格(DataGridView)控件的應(yīng)用案例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03