JavaScript event object
Link for all dot net and sql server video tutorial playlists
/ kudvenkat
Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...
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.
/ @aarvikitchen5572
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]
Auf dieser Seite können Sie das Online-Video JavaScript event object mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer kudvenkat 15 Januar 2015 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 61,169 Mal angesehen und es wurde von 321 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
