JavaScript Obtaining The Event Object

After registering the event to the HTML element, we can get the object of the event. Which helps to get the information of the event and the HTML element.

The handler function assign to the HTML element event is always get the event object as the parameter argument.

Handler function always get the event object as the first parameter argument.

Example 1:

The first way to assign the click event to the HTML element using the onclick attribute, In the onclick attribute value we have to pass the function name with the argument.

This argument is the event object.

The first argument passed to the function must be without the any quote and the must be named ‘event’. If you passed the argument other than the ‘event’ than the you can not get the event object.

So passed argument must be named ‘event’, This is the JavaScript constant for the event object.

HTML:

<input type="button" id="btnSubmit" value="Click here" onclick="Action(event);" />

JS:

function Action(event) {
    alert(event.type); // Click
}

Below Example will not worked because the parameter name is wrong.

HTML:

<input type="button" id="btnSubmit" value="Click here" onclick="Action(a);" />

JS:

function Action(event) {
    alert(event.type);
}

Above example will be not work because the in onclick attribute we passed the ‘a‘ as the argument and other than the ‘event’ will be not work.

Example 2:

HTML:

<input type="button" id="btnSubmit" value="Click here" />

JS:

function Action(event) {
    alert(event.type);
}

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

btnSubmit.onclick = Action;

Example 3:

HTML:

<input type="button" id="btnSubmit" value="Click here" />

JS:

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

btnSubmit.onclick = function (event) {
    alert(event.type);
}

In above examples We don’t need to passed the event object as the argument. It will automatically get the event object.

But in the some old Internet Explorer browser we are unable to get the event object in the above way so we have to use the ‘window.event’ object.

We have to use the ‘window.event‘ property to get the event object.

Internet Explorer Browser:

HTML:

<input type="button" id="btnSubmit" value="Click here" />

JS:

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

btnSubmit.onclick = function () {
    var event = window.event;

    alert(event.type);
}

In the above way we can get the event object in the Internet Explorer browser.

Cross-browser solution

HTML:

<input type="button" id="btnSubmit" value="Click here" />

JS:

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

btnSubmit.onclick = function (event) {
    var event = event || window.event;

    alert(event.type);
}

Above is the cross-browser solution to get the event object in the all browsers.

This is the some useful information which is get by the event object.

HTML:

<input type="button" id="btnSubmit" value="Click here" name="Submit" />

JS:

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

btnSubmit.onclick = function (event) {
    var event = event || window.event;

    var type = event.type;
    var timeStamp = event.timeStamp;
    var source = event.srcElement;

    var str = "Event Name: " + type + " \nEvent's TimeStamp: " + timeStamp + " \nElement ID: " + source.id;
        
    alert(str);
}

Get Element from the event object:

We can also get the element object from the event object, We have to use the ‘srcElement’ property of the event object to get the element object.

After getting the element object we can manipulate the HTML element.

HTML:

<input type="button" id="btnSubmit" value="Click here" name="Submit" />

JS:

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

btnSubmit.onclick = function (event) {
    var event = event || window.event;

    var element = event.srcElement;

    element.value = "Text is changed.";
}

Get Element From Event Object