我应该在哪里绑定jQuery中的全局事件

时间:2016-06-16 10:50:04

标签: javascript jquery events javascript-events

我想知道是否要创建自定义全局事件侦听器,我应该绑定该事件。我应该使用哪一个?

$(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()函数。

但我不确定将所有这些自定义事件绑定到同一个对象中是否合适。如果是,我应该绑定哪个对象,窗口?文献?体?

2 个答案:

答案 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');