javascript事件，自定义事件，基于自定义事件的解耦

事件代理

this是什么?

this在事件代理中是”父节点”,也就是为了省事，往上层绑定的节点。

这和addEventListener中不同哦！addEventListener中的this就是发生事件的节点。这也会造成一些callback函数作用域不符合预期的情况！event listener scope

解决eventListener绑定this到domElement的问题！

用

function() { callback(); } 

即一个匿名函数包裹你要调用的callback函数，这样匿名函数的this被重绑了，我们的callback完好无损！

或者呢，用原生bind()函数绑callback自己到callback方法里，暴力防this重绑！

自定义事件

如何创建自定义事件？

error事件用于提示xxx没有加载，beforeunload事件用于提示’是否退出？’，img也有load事件哦！

言归正传，

    var myEvent = new CustomEvent( eventName , options ); //创建自定义事件    element.dispatchEvent( myEvent ); //人工触发事件

其中，options的属性就是事件的属性，eventListener接到事件后可以相应的取出这些属性

用自定义事件解耦?

jQuery.fn.tabs = function( control ) {       var element = $(this);       control = $(control);       // Tab li       element.delegate("li","click",function(){           var tabName = $(this).attr("data-tab");           element.trigger("change.tabs" , tabName);       });       // Li Acitve       element.bind( "change.tabs", function( e, tabName ) {           element.find("li").removeClass("active");           element.find(">[data-tab='" +tabName+ "']").addClass("active");       });       // Content Active       element.bind( "change.tabs", function( e, tabName ) {           control.find(">[data-tab]").removeClass("active");           control.find(">[data-tab='" +tabName+ "']").addClass("active");       });       var firstName = element.find("li:first").attr("data-tab");       element.trigger("change.tabs", firstName);       return this;   };   $("ul#tabs").tabs("#tabsContent");

可以看到，ul#tabs中的li检测到click事件后，触发自定义事件change.tabs，该事件被ul#tabs和ul#tabsContent接受到，并分别做了不同的回调！

这样的好处是把controller逻辑分成两层，原生事件一层，自定义事件一层！裸写的话，原生事件一产生，全部逻辑放在一起写，不利于之后的修改！别人也很难看懂！

例子出自《基于javascript的web富应用》

继续，用pub/sub模式解耦？

基于jQuery的pub/sub插件tiny pub/sub
仔细想想，该怎么用上去呢？

思路：现在基于ul#tabs触发ul#tabsContent需要调用

    $('ul#tabs').tabs('ul#tabsContent')

但如果要增加触发的区域呢？比如ul#tabsContent2也想随ul#tabs变动？Pub/Sub可以解决这个问题！

参考来源：

http://www.codeceo.com/article/javascript-event-anay.html