Javascript event handling

So, while practising, I came across a code for event handling. The code is as follows:

//This generic event handler creates an object called eventHandler
var etHandler = {};

if (document.addEventListener) {

    //eventHandler object has two methods added to it, add()and remove(),
    etHandler.add = function(element, eventType, eventFunction) {

        /**
         * The add method in each model determines whether the event type is a load event, meaning that
         *  the function needs to be executed on page load.
         */
        if (eventType == "load") {

            .......

        }
    };// end of eventHandler.add = function()

    etHandler.remove = function(element, eventType, eventFunction) {

        element.detachEvent("on" + eventype, eventFunction);

    }; //end of  etHandler.remove = function()
}

function sendAlert() {

    alert("Hello");

} //end of sendAlert()

function startTimer() {

    var timerID = window.setTimeout(sendAlert,3200);

}//end of startTimer()

var mainBody = document.getElementById("mainBody");

etHandler.add(mainBody, "load", function() {

                                startTimer();

                            }
             );

These are the questions I'd like to pose. We start with an empty object. etHandler is a variable that should be set to;. It's all right. The condition if (document.addEventListener) is then checked.

var etHandler = {

    add: function() {

    },

    remove: function(){

    }
};

Despite the fact that no event listeners were added to the document, this condition is met. Why does this condition return true? etHandler.add = function(element, eventType, eventFunction) follows. Why are we creating etHandler.add? When we built the etHandler object, it had no properties. It's an empty object. If we construct etHandler in this manner,

After that, we can write etHandler.add. The same question applies to etHandler.remove.