JavaScript event object

Suggested Videos
Part 36 - Events in JavaScript
Part 37 - Assigning event handlers in JavaScript using DOM object property
Part 38 - addeventlistener and removeeventlistener in JavaScript



Whenever an event (like click, mouseover, mouseout etc) occurs, the relevant data about that event is placed into the event object. For example, the event object contains event data like, the X and Y coordinates of the mouse pointer when the event occurred, the HTML element that fired the event, which mouse button is clicked etc.



Obtaining the event object is straightforward. The event object is always passed to the event handler method. Let us understand this with an example. When we click the button, we want to capture the following event data
1. Event name
2. Mouse X coordinate when the event occured
3. Mouse Y coordinate when the event occured
4. The control that raised the event
5. The HTML tag name that raised the event



Notice that in the example below, we are passing event object as a parameter to the event handler method. The type property gives us the event name that occured. clientX and clientY properties return the X and Y coordinates of the mouse pointer. Target property returns the HTML element that raised the event. Target property is supported by all modern browsers and Internet Explorer 9 and above. The following code will not work in Internet Explorer 8 and earlier versions. In addition to click event, the following example returns mouseover and mouseout event data.

<input type="button" value="Click me" id="btn"

       onclick="displayEventDetails(event)"

       onmouseover="displayEventDetails(event)"

       onmouseout="displayEventDetails(event)" />

<br /><br />

<div id="resultDiv"></div>

<script type="text/javascript">

    function displayEventDetails(event)

    {

        var eventDetails = "Event = " + event.type + "<br/> X = " + event.clientX

                           + "<br/>Y = " + event.clientY + "<br/>Target Type = "

                           + event.target.type + "<br/>Target Tag Name = "

                           + event.target.tagName;

        document.getElementById("resultDiv").innerHTML = eventDetails;

    }

</script>

The following code works in all browsers including Internet Explorer 8 and earlier versions. IE 8 and earlier versions use srcElement property to return the HTML element that raised the event. IE 9 and all the other modern browsers use target property. So this is a cross browser solution.

<input type="button" value="Click me" id="btn"

       onclick="displayEventDetails(event)"

       onmouseover="displayEventDetails(event)"

       onmouseout="displayEventDetails(event)" />

<br /><br />

<div id="resultDiv"></div>

<script type="text/javascript">

    function displayEventDetails(event)

    {

        var sourceElement;

        if (event.srcElement)

        {

            sourceElement = event.srcElement;

        }

        else

        {

            sourceElement = event.target;

        }

        var eventDetails = "Event = " + event.type + "<br/> X = " + event.clientX

                           + "<br/>Y = " + event.clientY + "<br/>Target Type = "

                           + sourceElement.type + "<br/>Target Tag Name = "

                           + sourceElement.tagName;

        document.getElementById("resultDiv").innerHTML = eventDetails;

    }

</script>

The following example retrieves mousemove event data. Notice that as you move the mouse pointer over the button, the X & Y coordinates changes.

<input type="button" value="Click me" id="btn"

       onmousemove="displayEventDetails(event)" />

<br /><br />

<div id="resultDiv"></div>

<script type="text/javascript">

    function displayEventDetails(event)

    {

        var sourceElement;

        if (event.srcElement)

        {

            sourceElement = event.srcElement;

        }

        else

        {

            sourceElement = event.target;

        }

        var eventDetails = "Event = " + event.type + "<br/> X = " + event.clientX

                            + "<br/>Y = " + event.clientY + "<br/>Target Type = "

                            + sourceElement.type + "<br/>Target Tag Name = "

                            + sourceElement.tagName;

        document.getElementById("resultDiv").innerHTML = eventDetails;

    }

</script>