事件代理
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可以解决这个问题!
参考来源: