js事件模型與自定義事件實例解析
JavaScript 一個最簡單的事件模型,需要有事件綁定與觸發(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)); } } };
其中主要實現(xiàn)了bind(綁定事件)、unbind(刪除事件)與 trigger (觸發(fā)事件)。對同一事件名稱,可以綁定多個事件處理函數(shù);并按照綁定的順序依次觸發(fā)。
args.splice(0, handlers[i].length) 觸發(fā)時的傳參
事件綁定與觸發(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 //在點擊unbind后,只輸出 fnY };
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持我們!
上一篇:淺談Async和Await如何簡化異步編程(幾個實例讓你徹底明白)
欄 目:C#教程
本文標題:js事件模型與自定義事件實例解析
本文地址:http://mengdiqiu.com.cn/a1/C_jiaocheng/6061.html
您可能感興趣的文章
- 01-10C#通過重寫Panel改變邊框顏色與寬度的方法
- 01-10C#實現(xiàn)實體類與字符串互相轉(zhuǎn)換的方法
- 01-10C#自定義事件監(jiān)聽實現(xiàn)方法
- 01-10C#3.0使用EventLog類寫Windows事件日志的方法
- 01-10WinForm判斷關(guān)閉事件來源于用戶點擊右上角“關(guān)閉”按鈕的方法
- 01-10C#實現(xiàn)子窗體與父窗體通信方法實例總結(jié)
- 01-10時間戳與時間相互轉(zhuǎn)換(php .net精確到毫秒)
- 01-10基于C#實現(xiàn)簡單離線注冊碼生成與驗證
- 01-10C#開發(fā)中的垃圾回收機制簡析
- 01-10C#編程實現(xiàn)對象與JSON串互相轉(zhuǎn)換實例分析


閱讀排行
本欄相關(guān)
- 01-10C#通過反射獲取當前工程中所有窗體并
- 01-10關(guān)于ASP網(wǎng)頁無法打開的解決方案
- 01-10WinForm限制窗體不能移到屏幕外的方法
- 01-10WinForm繪制圓角的方法
- 01-10C#實現(xiàn)txt定位指定行完整實例
- 01-10WinForm實現(xiàn)仿視頻播放器左下角滾動新
- 01-10C#停止線程的方法
- 01-10C#實現(xiàn)清空回收站的方法
- 01-10C#通過重寫Panel改變邊框顏色與寬度的
- 01-10C#實現(xiàn)讀取注冊表監(jiān)控當前操作系統(tǒng)已
隨機閱讀
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 04-02jquery與jsp,用jquery
- 01-10C#中split用法實例總結(jié)
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改
- 01-11ajax實現(xiàn)頁面的局部加載
- 08-05織夢dedecms什么時候用欄目交叉功能?
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 01-10SublimeText編譯C開發(fā)環(huán)境設置
- 01-10delphi制作wav文件的方法
- 01-10使用C語言求解撲克牌的順子及n個骰子