How to have custom object listen for child custom object's events?
<p>I am trying to create a couple of custom objects in JavaScript and I am unsure if I am going about things the proper way.</p>

<p>I have two objects: 'UserInterface' and 'VolumeSlider'. Up until a moment ago these two objects were independent, but coupled through methods. I decided that UserInterface should instead 'have' a VolumeSlider.</p>

<p>So:</p>

<pre><code>UserInterface = {
    _volumeSlider: null,

    initialize: function () {
        this._volumeSlider = VolumeSlider; //TODO: Should this be a new volumeSlider();
        this._volumeSlider.initialize();

        //I want to setup a listener for VolumeSlider's change-volume events here.
    }
}

VolumeSlider = {
    _volumeSlider: null,

    initialize: function () {
        this._volumeSlider = $('#VolumeSlider');
        var self = this;
        this._volumeSlider.slider({
            orientation: 'horizontal',
            max: 100,
            min: 0,
            value: 0,
            slide: function (e, ui) {
                self.passVolumeToPlayer(ui.value);
            },
            change: function (e, ui) {
                self.passVolumeToPlayer(ui.value);
            }
        });
    },

    passVolumeToPlayer: function (volume) {
        if (volume != 0)
            UserInterface.updateMuteButton(volume);
        else
            UserInterface.updateMuteButton('Muted');
    }
}
</code></pre>

<p>Question is two-fold:</p>

<ul>
<li>Is this an alright way to be creating my objects and setting up children?</li>
<li>I would like UserInterface to be able to respond to VolumeSlider._volumeSlider's change and slide events instead of having to be explicitly told. How can I go about accomplishing this?</li>
</ul>
