JavaScript mouse events




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 + “rn”;
}

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

Original source


7 responses to “JavaScript mouse events”

Leave a Reply