I have a script for a web page that has to initialize a lot of complex event handlers on page load. Because of the large number of events and DOM elements that these events should fire for, I want to construct a global object containing all the initialization logic.
var Global =
{
button1Handler: function () {
return {
button1: $("#button1"),
init: function () {
this.button1.on("click", function () { alert("button1 clicked"); });
}
};
},
button2Handler: function () { /* */},
init: function () {
this.button1Handler().init();
this.button2Handler().init();
// ...
}
};
$(function () {
Global.init();
});
But as I'm quite new to JavaScript, I have no idea whether this is the most simple or correct way to do this. And I'm not sure I like these chain function calls: button1Handler().init().
Is there a better way to write this piece of code?