Question

I am new to Javascript. while practicing i encounter a code regarding event handling. Here is the code

//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" + eventType, eventFunction);

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

function sendAlert() {

    alert("Hello");

} //end of sendAlert()

function startTimer() {

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

}//end of startTimer()

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

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

                                startTimer();

                            }
             );

The questions that i want to ask are this. We create an empty object.var etHandler = {};. It’s fine. Then we are checking condition if (document.addEventListener) {}. we didn’t add any event listener to the document, but this condition is true. Why this condition is returning true?
Then we write etHandler.add = function(element, eventType, eventFunction) {}. Why we are writing etHandler.add? etHandler object has no property, when we created it. It’s a null object. If we create etHandler like this

var etHandler = {

    add: function() {

    },

    remove: function(){

    }
};

Then we can write etHandler.add. The same question is for etHandler.remove also.

Thanks

Answer 1

The call if (document.addEventListener) is checking whether the browser supports this method. It is checking to see whether it exists on the document object. This is called feature detection and is frequently used to detect differences between browsers.

The call etHandler.add = function(element, eventType, eventFunction) defines the add method and creates it simultaneously. It is basically the same as in your example.