CODEWITHSUNDEEP
javascriptevents
Lion King
Lion King

Reputation: 33823

Why the event object is undefined in my case

When click on a button, I want to get the event object e in the modern browsers like Firefox, Chrome,etc. the problem is when click on the button give me an undefined event object, note that when use window.event in internet explorer browser gets the event object.

// the Object
var countdown = {
    hours: 0,
    minutes: 0,
    seconds: 0,
    element_h: null,
    element_m: null,
    element_s: null,
    init: function (hElemId, mElemId, sElemId) {
        this.element_h = document.getElementById(hElemId);
        this.element_m = document.getElementById(mElemId);
        this.element_s = document.getElementById(sElemId);
    },
    play: function (e){
        alert(e.target);
    }
};

HTML:

<button onclick="countdown.play();">Play</button>

Upvotes: 5

Views: 22925

Answers (3)

thefourtheye
thefourtheye

Reputation: 239653

You have to explicitly pass the event object to the onclick handler, like this

<button onclick="countdown.play(event);">Play</button>

Quoting MDN's Event Registration Doc page,

The JavaScript code in the attribute is passed the Event object via the event parameter.

When you register an event handler inline, it can be given the Event object with the event parameter. This will not be done automatically though. That is why we have to explicitly pass the event object. Since you didn't pass it, e is undefined by default.

Upvotes: 15

Guffa
Guffa

Reputation: 700790

The event object is passed to the event handler as the first parameter by the name event (or in the case of IE a global variable). You would pick up the parameter/variable and pass it on to the method.

Note that IE8 and older doesn't support the target property, so you need to use the srcElement property for those:

var countdown = {
    hours: 0,
    minutes: 0,
    seconds: 0,
    element_h: null,
    element_m: null,
    element_s: null,
    init: function (hElemId, mElemId, sElemId) {
        this.element_h = document.getElementById(hElemId);
        this.element_m = document.getElementById(mElemId);
        this.element_s = document.getElementById(sElemId);
    },
    play: function (e){
        alert(e.target || e.srcElement);
    }
};
<button onclick="countdown.play(event);">Play</button>

Upvotes: 3

six fingered man
six fingered man

Reputation: 2500

"Why the event object is undefined in my case"

Here's why. When you bind an inline handler, what happens is that an anonymous function is created and put on the element's onclick property.

Depending on the browser, that handler will look either like these:

// IE 8 and lower
elem.onclick = function() {
    countdown.play(); // <-- Invoking your method, but not passing anything
}


// Other browsers
elem.onclick = function(event) {
    countdown.play(); // <-- Invoking your method, but not passing anything
}

So both versions have a pretty obvious issue. You're calling your function without passing anything to it.

This is why you need to define an event parameter in your call.

<button onclick="countdown.play(event);">Play</button>

Now it'll look like these:

// IE 8 and lower
elem.onclick = function() {
    countdown.play(event); // <-- there's no parameter, but there is `window.event`
}


// Other browsers
elem.onclick = function(event) {
    countdown.play(event); // <-- it's just passing the parameter
}

Now it looks right. In IE8 and lower, there's no event parameter in the function, but it'll get the global event object.

In the second version, it's just passing along the parameter that was defined by the browser.

This also shows why you can't use e or some other name.

<button onclick="countdown.play(e);">Play</button>

Because you'll be passing a variable that's not defined anywhere.

// IE 8 and lower
elem.onclick = function() {
    countdown.play(e); // <-- there's no `e` defined in here
}


// Other browsers
elem.onclick = function(event) {
    countdown.play(e); // <-- there's no `e` defined in here
}

Upvotes: 2

Related Questions