Java Script and Mouse Events

JScript Events

JavaScript and Mouse Events

Event Name: onclick
Description: This event will be triggerd/generated when the user press and release a left mouse button on the element where onclick event is used.
Example: Inside a script Block: function somName() { document.bgColor = Red; } Inside the Body: <p onclick='somName();'>U can use any element..</p> When user clicks on the paragraph the documents background color is change to Red

Event Name: ondblclick
Description: This event will be triggerd/generated when the user press and release a left mouse button twise on the element where ondblclick event is used.
Example: Inside a script Block: function somName() { document.bgColor = Green; } Inside the Body: <p ondblclick='somName();'>U can use any element..</p> When user double click on the paragraph the documents background color is change to Green

Event Name: onmousedown
Description: This event will be triggerd/generated when the user presses (But not releases) a left mouse button on the element where onmousedown event is used.
Example: Inside a script Block: function somName() { document.bgColor = Blue; } Inside the Body: <p onmousedown='somName();'>U can use any element..</p> When user presses a left mouse button on the paragraph the documents background color is change to Blue

Event Name: onmouseup
Description: This event will be triggerd/generated when the user releases a pressed left mouse button on the element where onmouseup event is used.
Example: Inside a script Block: function somName() { document.bgColor = Gray; } Inside the Body: <p onmouseup='somName();'>U can use any element..</p> When user clicks on the paragraph the documents background color is change to Gray

Event Name: onmousemove
Description: This event will be triggerd/generated when the user move a mouse pointer on the element where onmousemove event is used.
Example: Inside a script Block: function somName() { document.bgColor = Yellow; } Inside the Body: <p onmousemove='somName();'>U can use any element..</p> When user move the mouse pointer over the paragraph the documents background color is change to Yellow

Event Name: onmouseover
Description: This event will be triggerd/generated when the user place a mouse pointer on the element where onmouseover event is used.
Example: Inside a script Block: function somName() { document.bgColor = White; } Inside the Body: <p onmouseover='somName();'>U can use any element..</p> When user place a mouse pointer on the paragraph the documents background color is change to White

Event Name: onmouseout
Description: This event will be triggerd/generated when the user removes the mouse pointer from the element where onmouseout event is used.
Example: Inside a script Block: function somName() { document.bgColor = Cyan; } Inside the Body: <p onmouseout='somName();'>U can use any element..</p> When user remove mouse pointer from the paragraph the documents background color is change to Cyan

Complete Example

<html> <head> <title>Mouse Events</title> <script language=javascript> function chngBgColor(clor) { document.bgColor= clor; } </script> </head> <body> <p onclick="chngBgColor(Red);">Click on me!</p> <p ondblclick="chngBgColor(Green);">Double Click on me!</p> <p onmousedown="chngBgColor(Blue);" onmouseup="chngBgColor(Gray);"> Press/Release left mouse button on me!</p> <p onmousemove="chngBgColor(Yellow);">Move on me!</p> <p onmouseover="chngBgColor(White);" onmouseout="chngBgColor(Cyan);"> Enter or Exit on/from me!</p> </body> </html>