资源描述：
《jquery技巧之让任何组件都支持类似dom的事件管理_jquery》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、jQuery技巧之让任何组件都支持类似DOM的事件管理本文介绍一个jquery的小技巧，能让任意组件对象都能支持类似DOM的事件管理，也就是说除了派发事件，添加或删除事件监听器，述能支持事件冒泡，阻止事件默认行为等等。在jquery的帮助下，使用这个方法来管理普通对象的事件就跟管理DOM对象的事件一模一样，虽然在最后当你看到这个小技巧的具体内容时，你可能会觉得原来如此或者不过如此，但是我觉得如果能把普通的发布-订阅模式的实现改成DOM类似的事件机制，那开发出來的组件一定会有更大的灵活性和扩展性，而且我也是第一次使用这种方法（见识太浅的原因），觉得它的使用价值还蛮大的，所以就把它分
2、享岀来了。在正式介绍这个技巧之前，得先说一下我之前考虑的一种方法，也就是发布-订阅模式，看看它能解决什么问题以及它存在的问题。1.发布-订阅模式很多博客包括书本上都说javascript要实现组件的自定义事件的话，可以采用发布-订阅模式，起初我也是坚定不移地这么认为的，于是用jquery的$.Callbacks写了一个：define(function(require,exports,module){var$=requirejquery');varClass=require('・/class');functionisFunc(f){returnObject,prototype.to
3、String.apply(f)二二二'[objectFunction]';}/***这个基类可以让普通的类具备事件驱动的能力*提供类似jq的onofftrigger方法，不考虑one方法，也不考虑命名空间*举例：*vare二newEventBase();*c.on(Jload，,function(){*console・log('loaded');*})；*e.trigger(，load，);//loaded*e.off('load');*/varEventBase=Class({instanceMembers:{init:function(){this,events二{};//把
4、$・Callbacks的flag设置成一个实例屈性，以便子类可以覆盖this.CALLBACKS_FLAG='unique';},on:function(type,calIback){type=$・trim(type);//如果type或者callback参数无效则不处理if(!(type&&isFunc(callback)))return;varevent=this・events[type];if(!event){//定义一个新的jq队列，且该队列不能添加重复的回调event=this.events[type]=$.Callbacks(this.CALLBACKS_FLAG);
5、}~//把callback添加到这个队列中，这个队列可以通过type来访问event.add(callback);},off:function(type,callback){type=$.trim(type);if(!type)return;varevent二this.events[type];if(!event)return;if(isFunc(callback)){//如果同时传递type跟callback,则将callback从type对应的队列屮移除event.remove(callback);}else{〃否则就移除整个type对应的队列deletethis.event
6、s[type];}},trigger:function(){varargs二[].siice.apply(arguments),type=args[0];//第一个参数转为typetype=$.trim(type);if(!type)return;varevent二this.events[type];if(!event)return;//用剩卜•的参数來触发type对应的回调〃同时把回调的上下文设置成当前实例event.fireWith(this,args,slice(1));}}})；returnEventBase;})；（基于seajs以及《详解Javascript的继承实现
7、》介绍的继承库class,js）只要任何组件继承这个EventBase,就能继承它提供的onofftrigger方法來完成消息的订阅，发布和取消订阅功能，比如我下面想要实现的这个FileUploadBaseView:definc(fimction(require,exports,module){var$=require(Jjquery');varClass=require('・/class');varEventBase二require(，./eventBase');varDEFA
