生活随笔
收集整理的這篇文章主要介紹了
事件绑定机制简单实现
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
原理：
維護(hù)一個(gè)事件數(shù)組
通過apply調(diào)用
var slice = [].slice;/*
* event control class
* @param {context}
*/function Event(ctx){this._ctx = ctx || this;this._events = {};
}var EventProto = Event.prototype;/*
* bind a event
* @param {event} eventType
* @param {fn} function
*/
EventProto.on = function(event, fn){this._events[event] = this._events[event] || [];this._events[event].push(fn);return this;
}/*
* bind an event but only called one time
* @param {event} eventType
* @param {fn} function
*/
EventProto.once = function(event, fn){var self = this;//when fn is called, remove all event listenerfunction fnWrap(){self.off(event, fnWrap);fn.apply(this, arguments);}//to specifiy remove methodfnWrap.fn = fn;this.on(event, fnWrap);return this;
}/*
* unbind an event
* @param {event} eventType
* @param {fn} function
*/EventProto.off = function(event, fn){//remove all eventsif(!arguments){this._events = {};return this;}//there are not fn bindedvar events = this._events[event];if(!events) return this;//remove an type eventsif(arguments.length === 1 && typeof event === 'string'){delete this._events[event];return this;}//remove fnvar handler;for(var i = 0; i < events.length; i++){handler = events[i];if(handler === fn || handler.fn === fn){events.splice(i, 1);break;}}return this;
}/*
* emit
* @param {event}
* @param {fn param}
*/
EventProto.emit = function(event){var events = this._events[event],args;if(events){events = events.slice(0);args = slice.call(arguments, 1);events.forEach(function(event){event.apply(this._ctx, args);})}return this;
}
總結(jié)
以上是生活随笔為你收集整理的事件绑定机制简单实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
