Why is the event object undefined in my case
When you press the button, I want to get the event object e
in modern browsers, for example Firefox
, Chrome
, etc
. the problem is that when the button is clicked give me an event object undefined
, note that when used window.event
in the 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>
source to share
You must explicitly pass the object event
to your onclick handler like this
<button onclick="countdown.play(event);">Play</button>
Quoting MDN Event Registration Registration Page .
The JavaScript code in the attribute is passed to the Event object through the event parameter.
When you register a built-in event handler, an object event
with a parameter can be given to it event
. However, this will not be done automatically. This is why we must pass the object explicitly event
. Since you didn't pass it, e
by default undefined
.
source to share
The event object is passed to the event handler as the first parameter by name event
(or in the case of IE, a global variable). You have to select the / variable option and pass it to the method.
Note that IE8 and older do not support property target
, so you need to use property srcElement
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>
source to share
"Why is the event object undefined in my case"
That's why. When you bind an inline handler, what happens is that an anonymous function is created and placed in an element property onclick
.
Depending on the browser, this handler will look like this:
// 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 problem. You call your function without passing anything to it.
This is why you need to define a parameter event
in your call.
<button onclick="countdown.play(event);">Play</button>
It will now look like this:
// IE 8 and lower
elem.onclick = function() {
countdown.play(event); // <-- there no parameter, but there is `window.event`
}
// Other browsers
elem.onclick = function(event) {
countdown.play(event); // <-- it just passing the parameter
}
It looks correct now. In IE8 and below, there is no parameter event
in the function, but it will receive a global object event
.
In the second version, it just traverses a parameter defined by the browser.
It also shows why you cannot use e
another name.
<button onclick="countdown.play(e);">Play</button>
Because you will be passing a variable that is not defined anywhere else.
// IE 8 and lower
elem.onclick = function() {
countdown.play(e); // <-- there no `e` defined in here
}
// Other browsers
elem.onclick = function(event) {
countdown.play(e); // <-- there no `e` defined in here
}
source to share