confusion regarding event handling in Javascript

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

mrtsherman · Accepted Answer · 2012-02-10 04:55:40Z

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.

answered Feb 10, 2012 at 4:55

mrtsherman

40k23 gold badges90 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Basit Over a year ago

HHmm i read about feature detection, but in the book, it was written that use typeof for feature detection, Like To test for the existence of the getElementById() method, which indicates that the browser supports the more advanced DOM interface, you might use this code:

if (typeof document.getElementById != "undefined") { alert("getelembyid is supported"); } else { alert("no getelembyid support"); }

. It was also written You may be tempted to skip the use of typeof within the test, and you may see examples on the web where a feature test looks like this: continue....

Basit Over a year ago

if(document.getElementById) { ... }. Unfortunately, this method of feature testing isn’t as reliable as the typeof test. The problem is that the shorter syntax runs the method. When you omit typeof, the method or property being tested might return 0 or false by default, which makes the test fail; in other words, it appears that the browser doesn’t support that method or property—when it actually does. Therefore, testing using typeof is safer and more reliable.. That's why i counfused...

Basit Over a year ago

You also said 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. You mean to say behind the scenes, javascript creates something like this? var etHandler = { add: function() {},remove: function(){}}; Is it?

mrtsherman Over a year ago

@Basit - You already seem to know the answer to your question! Honestly I don't see people use typeOf for feature detection. The fact that not using typeOf causes the method to run, and that this may return zero or false tells me that the method exists, which is the whole point isn't it?

mrtsherman Over a year ago

@Basit - Yes, something like that. Open your debugger and run this fiddle. Then call each object in console. You can see that they are identical. jsfiddle.net/d49nW

|

Collectives™ on Stack Overflow

confusion regarding event handling in Javascript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related