The mouse triggered events in DOM

The mouse events occur when action has been triggered by a mouse device. They can be triggered as any other events from HTML and manipulated by adding functions or registering listeners. The mouse events which can be added to web-page are described below:

The onmouseover and onmouseout events

These events occur when mouse moves a over the element and out of it respectively. These events can be bubbled and cancelled. In the example below, when the mouse moves inside the <div> cube the style of the div changes. In the <div> square, when mouse moves in and then comes out of it, the event is triggered.

Example with onmouseover and onmouseout events

<!DOCTYPE html>
<html>

<body>
	<div id="cube" style="border: 1px solid; padding: 10px;" onmouseover="style.color='red'" >
		<p>Move mouse inside it to trigger 'onmouseover'.</p>
	</div><br/>
	<div id="square" style="border: 1px dotted; padding:10px;" onmouseout="style.color='yellow'"> 
		<p>Move mouse inside and out of it to trigger 'onmouseout&rsquo;.</p>
	</div>
</body>

</html>

The onmousedown and onmouseup events

These events occur when a mouse button is pressed and released respectively. These can be useful events when users press the mouse button on the a link and depress outside of it, or vice-versa. This is a different event than a click event. Using alerts pop-ups with these events can confuse the browser and might produce wrong alerts. Hence it is best to use these with texts.

Example with onmousedown and onmouseup events

<!DOCTYPE html>
<html>

<head>
    <script>		
        function eFunction1(){
            para1.style.color="red";
        }
        
        function eFunction2(){
            para2.style.color="green";
        }	
    </script>
</head>

<body>
    <p id="para1" onmousedown="eFunction1()"> Onmousedown event occurs in this paragraph</p>
    <p id="para2" onmouseup="eFunction2()"> Onmouseup event occurs in this paragraph</p>
</body>

</html>

The onmousemove event

The onmousemove event occurs when a mouse or a pointer device moves over an element. If there is a complicated function associated with this event, it might take time to execute and might appear as slow process for user. The below example gives the cursor position in the screen. The event is triggered when there is change of position of cursor on the screen and outputs the same in paragraph with id ‘pixel’.

Example with onmousemove event

<!DOCTYPE html>
<html>

<head>	
	<script>
	function getScreenPixel(event) {
            var mouseX = Math.round (event.clientX);
            var mouseY = Math.round (event.clientY);

            document.getElementById ("pixel").innerHTML = "mouseX pos: " + mouseX + "px mouseY pos: " + mouseY + "px";
            flyingObj.style.left = mouseX + "px";
            flyingObj.style.top = mouseY + "px";

        }
    </script>
</head>

<body onmousemove="getScreenPixel(event);">
    <p id = "pixel">  Cursor position in screen.</p >
</body>

</html>

The onclick event

The onclick event occurs when an user clicks on an element. In the example below when an user clicks on the paragraph, click event is triggered and the paragraph style changes.

Example with onclick event

<!DOCTYPE html>
<html>

<body>
    <p id="inner" > This is a paragraph element. Click on it to trigger 'click' event</p>
    <script>		
	    document.getElementById("inner").addEventListener("click", function(){
			document.getElementById("inner").style.color = "blue";
			alert("Click event in para");
		}, false);
	</script>
</body>

</html>

The ondblclick event

The ondblclick event occurs when an user double clicks over an HTML element. It should not be combined with a single click on an element as multiple click events get triggered before the double click gets executed.

Example with ondblclick event

<!DOCTYPE html>
<html>

<body>
    <p id="inner" > This is a paragraph element. Double click on it to trigger 'dblclick' event</p>
    <script>
        document.getElementById("inner").addEventListener("dblclick", function(){
	        document.getElementById("inner").style.color = "blue";
	        alert("Dblclick event in para");
	    }, false);
    </script>
</body>

</html>

The onmouseenter and onmouseleave events

These events are proprietary to IE. They are similar to mouseover and mouseout, except it is not a bubble able. The entire HTML element is seen as a single block and does not trigger event to the mouse coming in or leaving the element in its document hierarchy.

Example with onmouseenter and onmouseleave events

<!DOCTYPE html>
<html>

<body>
    <img onmouseenter="bigDress(this)" onmouseleave="normalDress(this)" src="..\..\..\img\tutorials\js_bom_popup_dress.png" alt="dress" width="40" height="40">
    <p> Move the mouse over the image to get enhanced vision</p>
    <script>
	    function bigDress(x){
		    x.style.height = "auto";
		    x.style.width = "40%";
	    }	
	    function normalDress(x){
		    x.style.height = "auto";
		    x.style.width = "20%";
	    }
	</script>
</body>

</html>

The oncontextmenu event

The oncontextmenu event occurs when one of the HTML / DOM elements has a mouse clicked with its right button (menu). This event can be bubbled and captured. However this events does not exist in all browsers.

Example with oncontextmenu event

<!DOCTYPE html>
<html>

<body>
	<a href="www.google.com" oncontextmenu="style.color='orange'">Right click here</a>
</body>

</html>

›› go to examples ››