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)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持我們!
上一篇:淺談Async和Await如何簡化異步編程(幾個實例讓你徹底明白)
欄 目:C#教程
本文標(biāo)題:js事件模型與自定義事件實例解析
本文地址:http://www.jygsgssxh.com/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ā)中的垃圾回收機(jī)制簡析
- 01-10C#編程實現(xiàn)對象與JSON串互相轉(zhuǎn)換實例分析


閱讀排行
本欄相關(guān)
- 01-10C#通過反射獲取當(dāng)前工程中所有窗體并
- 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)控當(dāng)前操作系統(tǒng)已
隨機(jī)閱讀
- 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)境設(shè)置
- 01-10delphi制作wav文件的方法
- 01-10使用C語言求解撲克牌的順子及n個骰子


