Mouse Out

A MouseOut event occurs when the user moves the cursor away from a HTML hyperlink on a Web Page.The anchor <a> element can specify an event handler for the MouseOut  event by assigning a JavaScript function call to the HTML onmouseout attribute.

For Instance…

<a href="abc.html" onMouseOut="on_mouseout()" onMouseOver="on_mouseover()">MOUSE OUT EVENT</a>

//a function to react over the mouseout event
function on_mouseout()
{
    document.forms.f.txt.value = "Mouse is Off the link.";
}

//a function to react over the mouseover event
function on_mouseover()
{
    document.forms.f.txt.value = "Mouse is above the link.";
}

ScreenShot005

Advertisements

Load Event

The Load event does not occur until all the HTML elements on a Web Page have completely loaded.This means that the onload event handler will only run after all the elements are present.Typically the onload event handler will call a JavaScript function that will initialize a number of values.

For Instance…

<form name="f" method="post" action="">
  Loading Status:<input type="text" name="txt">
</form>

//a function to react to the load event

function init()
{
    document.bgColor="orange";
    document.fgColor="blue";
    var str = "The Page is Loaded";
    document.forms.f.txt.value = str;
}
window.onload=init;

Load Event

Mouse Over

A Mouse Over event occurs when the user places the cursor over a object on a web page.The anchor a element can specify an event handler for the MouseOver event by assigning a JavaScript function call to the HTML onmouseover attribute.

For Instance…

<a href="abc.html" onMouseOver="on_mouseover()">Mouse Over Event Link</a>

//a function to react over the mouseover event
function on_mouseover()
{
    document.forms.f.txt.value = "Mouse is above the link.";
}

 

Mouse Over Event

Capture Mouse Event

Whenever the user moves the cursor a MouseMove event occurs and this can be captured by JavaScript for use with an onmousemove event-handler.

For Instance…

//Netscape/Mozilla capture events
if(navigator.appName == “Netscape”)
window.captureEvents(Event.MOUSEMOVE);

//a function to react to the MOUSEMOVE event
function track(e)
{
var x = (document.all)?event.x:e.pageX;
var y = (document.all)?event.y:e.pageY;
document.forms.f.txt.value=”X: “+x+ ” Y: ” +y;
}

//specify the onmousemove event handler
document.onmousemove=track;

ScreenShot003

Mouse Click Event

The most common interactive event is the Click event generated when a user clicks the left  mouse button while the cursor is over a form button in a Web Document.An onclick event handler is normally assigned in the button’s HTML <input> tag with the HTML onclick attribute.

For Instance…

<input type=”button” value=”On Click” onClick=”on_click(‘An On Click Event Is Generated’)”/>

// a function to react to the click event

function on_click(str)
{
alert(str);
}