我想知道是否要创建自定义全局事件侦听器,我应该绑定该事件。我应该使用哪一个?
$(window).trigger('someEvent');
或
$(document).trigger('someEvent');
或
$('body').trigger('someEvent');
例如,有一个网站,它有家,关于我们,新闻和其他一些页面。每个页面都有自己的javascript文件,即home.js,about-us.js ..等等。还有一个常见的javascript文件main.js,它提供整个站点的所有核心或常用功能。
现在我想通过在main.js中触发自定义事件来集中所有$(document).ready()和$(window).resize()函数,就像这样
$(document).ready(function(){
$(document).trigger('documentReady');
});
和
$(window).resize(function(){
$(window).trigger('windowReszie');
});
所有javascript文件中,只需要一个eventListener用于相应的事件,而不是在每个文件中重复那些ready()或resize()函数。
但我不确定将所有这些自定义事件绑定到同一个对象中是否合适。如果是,我应该绑定哪个对象,窗口?文献?体?
答案 0 :(得分:1)
我认为您可以使用发布/订阅模式,这是一种基于事件的思维模式,但“事件”并不依赖于特定对象
您的代码将如下所示
main.js
$(document).ready(function(){
$.publish('documentReady');
});
$(window).resize(function(){
$.publish('resize');
});
然后,在其他.js中你可以简单地订阅:
$.subscribe('documentReady', function(){ alert('documentReady'); });
$.subscribe('resize', function(){ alert('resize'); });
发布/订阅模式还允许您创建模块化和可重用的代码,并在创建更好的应用程序,松散耦合,灵活,可扩展和易于测试方面发挥重要作用。
THIS是该代码的一个小工作示例(我使用jquery-tiny-pubsub plugin用于发布/订阅方法,但您可以使用您想要的任何内容)
答案 1 :(得分:0)
以上所有工作,但您应该始终尽可能具体地了解您正在与之交互的组件。正如您所描述的那样,自定义事件不需要绑定到高级DOM元素。
示例:强>
$('.slider').trigger('someEvent');