JavaScript event object




Link for all dot net and sql server video tutorial playlists
http://www.youtube.com/user/kudvenkat/playlists

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2015/01/javascript-event-object.html

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]

Original source


9 responses to “JavaScript event object”

  1. I would like to add my admiration for your video tutorials as well. I have said that your crisp, clean precise diction, topic focus are far beyond most if not all other such tuts. Thank you Vankat. Also would you be able to add tuts on How to produce/write Requirements documents?

  2. javascript was one of the reason I always tried to avoid web developing. But with this kind of tutorials I understand it, and it's also fun to write javascript (jquery is more interesting by the way)

  3. So, How do I catch the inputs from HTML form and generate an output with the data (say selected options from multi-select dropdown), also, onclick event via Javascript (and functions etc.)? Do you have a video on it?

Leave a Reply