JavaScript event object

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

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)
{

}
[/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;

{
}
else
{
}

}
[/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;

{
}
else
{
}

}
[/script]

[piyushjha]

i have to say, these videos are one of the most comprehensive tutorial on javascript. Take a bow Master

[arianitonline]

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)

[georgigeorgiev]

Thank you very much. It video is very useful.
GOD bless you and keep you.

[raphaelbernard]

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?

[JD-kfki]

So the event object in this case is the "event" parameter that passed into "getEventDetails" function, right?

[Shakespeare]

I am most interested in id. or some other tag that can bring CUSTOM data out of the event, and do you have a tutorial on "onDrop". I need info. from both the object being dropped on, and the object being dragged and dropped.

[curiosityhouse]

Thank you so much. It was really helpful.

[pallavibhojak]

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?

[ConaxHateGG]

I find that if a mousemove event handler is added, then the click event no longer fires. Why is that?

[logizticsinc]

Mr.Venkat I can't get event.clientX property in Visual Studio.

[gkmishra]

Give video on MS Azure and its services