Welcome
Login / Register

JavaScript mouse events

Featured video
You need to have the Flash Player installed and a browser with JavaScript support.

Thanks! Share it with your friends!

URL

You disliked this video. Thanks for the feedback!

URL


Published by Admin in Java Script
337 Views

Description

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-mouse-events.html

In this video we will discuss the commonly used JavaScript mouse events. Most browsers support these events.

mouseover - Occurs when the mouse pointer is moved over an element
mouseout - Occurs when the mouse pointer is moved out of an element
mousemove - Occurs when the mouse pointer is moving while it is over an element
mouseup - Occurs when the mouse button is released over an element
mousedown - Occurs when the mouse button is pressed over an element
click - Occurs when the mouse button is clicked. mousedown, mouseup&click events occur in sequence
dblclick - Occurs when the mouse button is double-clicked. mousedown, mouseup, mousedown, mouseup, click&dblclick events occur in sequence
contextmenu - Occurs when the mouse right button is clicked. mousedown, mouseup&contextmenu events occur in sequence

Here is an example which logs the mouse events to textarea element as they occur.

[input type="button" value="Single, Double or Right Click" onclick="logEvent(event)"
onmousedown="logEvent(event)" onmouseup="logEvent(event)" onmouseover="logEvent(event)"
onmouseout="logEvent(event)" ondblclick="logEvent(event)" oncontextmenu="logEvent(event)" /]
[input type="button" value="Clear" onclick="clearText()"/]
[br /][br /]
[textarea id="txtArea" rows="10" cols="20"][/textarea]
[script type="text/javascript"]
function logEvent(event)
{
event = event || window.event;
document.getElementById("txtArea").value += event.type + "\r\n";
}

function clearText()
{
document.getElementById("txtArea").value = "";
}
[/script]

Show more

Post your comment

Comments

Be the first to comment