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