Also Read: How To Handle Document Load Event in JavaScript
Table of Contents
How To Handle MouseOver and MouseOut Event
Events of types mouseover (and mouseout) occur when a mouse comes over(goes out) an element. These two events can be used, among other things, to create hover effects, showing or styling something when the mouse is over a given element.
CSS code:
#button {
width: 186px;
height: 52px;
font-size:1em;
color:red;
}HTML Code:
<button id="button">Mouse Over Me</button>JavaScript Code:
<script>
var btn=document.getElementById("button")
if (btn.addEventListener) {
btn.addEventListener("mouseover", function(event) {
btn.style.background = "#00aaff";
btn.innerHTML="Mouse Over"; });
btn.addEventListener("mouseout", function(event) {
btn.style.background = "";
btn.innerHTML="Mouse Out";});
}
else if (btn.attachEvent) {
btn.attachEvent("onmouseover", function(event) {
btn.style.background = "#00aaff";
btn.innerHTML="Mouse OVer";});
btn.attachEvent("onmouseout", function(event) {
btn.style.background = "";
btn.innerHTML="Mouse Out"; });
}
</script>Preview:
Also Read: How To Change The ClassName Using JavaScript
How To Handle MouseMove Event
Every time the mouse pointer moves, a “mousemove” event fires. This event can be used to track the position of the mouse. A common situation in which this is useful is when implementing some form of mouse-dragging functionality.
The object passed to mouse event handlers has clientX and clientY properties that specify the coordinates of the mouse pointer relative to the containing window. If you scroll down, left or up without moving the mouse the values of clientX/clientY don’t change, because they are relative to the window, not the document.
Here is an example to show changes the value of clientX and clientY property on move the mouse over the input.
<input onmousemove="this.value = event.clientX+':'+event.clientY">To get precise information about the place where a mouse event happened, you can look at its pageX and pageY properties, which contain the event’s coordinates (in pixels) relative to the top-left corner of the document.
Here is an example to show changes the value of pageX and pageY property on move the mouse over the input.
<input onmousemove="this.value = event.pageX+':'+event.pageY">Preview:
Following is the preview of above HTML codes, changes the value of clientX and clientY property on move the mouse over the input.
Here is another example to show the mousemove event, where width and height of rectangle changes on mousemove.
HTML Code:
<p>Drag the bar to change its width:</p>
<div id="div1" style="background: green; width: 60px; height: 20px">
</div>JavaScript Code:
<script> var lastX; var lastY;
var rect = document.getElementById("div1");
rect.addEventListener("mousedown", function(event) {
if (event.which == 1) {
lastX = event.pageX;
lastY=event.pageY;
addEventListener("mousemove", moved);
event.preventDefault();
} });
function buttonPressed(event) {
if (event.buttons == null) return event.which != 0;
else return event.buttons != 0;
}
function moved(event) {
if (!buttonPressed(event)) {
removeEventListener("mousemove", moved);
}
else {
var distX = event.pageX - lastX;
var distY=event.pageY-lastY;
var newWidth = Math.max(10, rect.offsetWidth + distX);
var newHeight = Math.max(10, rect.offsetHeight + distY);
rect.style.width = newWidth + "px";
rect.style.height = newHeight + "px";
lastX = event.pageX;
lastY = event.pageY;
} }
</script>Preview:
Drag the bar to change its width and height:
Drag the bar to change its width:
Read Also: How To Register Event Handlers in JavaScript
How To Handle Click and Double Click Event
For click-related mouse events, it may be important, which button was pressed. The button property specifies which mouse button, if any, was held down when the event occurred. The event object contains two properties which and button, they store the button in a numeric form.
Most of the browsers except IE have which value 0 for left button pressed, 1 for middle button pressed and 2 for right button pressed. For IE browser, the property button property is a 3-bit number, every bit is up if the button is pressed.So, button & 1 is set to 1, if the left button is pressed, button & 2 is 1, if the right button is pressed, and button & 4 if the middle button is pressed.
HTML Code:
<div id="which-button" style="width:300px;height:50px;border:solid brown 1px;font-size=1.5em;color:red;text-align:center;padding-top:20px;">Press Left, Middle or Right button<div>JavaScript Code:
<script>
var wh=document.getElementById('which-button');
document.onclick=function(e) {
if (!e.which && e.button) {
if (e.button & 1) e.which = 1 // Left
else if (e.button & 4) e.which = 2 // Middle
else if (e.button & 2) e.which = 3 // Right
}
if (e.which==1) {wh.innerHTML="Left Button Pressed";}
else if (e.which==2) {wh.innerHTML="Middle Button Pressed";}
else if (e.which==3) {wh.innerHTML="Right Button Pressed";}
}
</script>Preview:
Press left, middle or right button to see which mouse button was pressed.
The following code implements a primitive drawing program. Every time you click the document, it adds a dot under your mouse pointer.
CSS Code:
<style>
.disc {
height: 8px; width: 8px; border-radius: 20px; border:solid red 14px;
background: blue; position: absolute;
}
</style>JavaScript Code:
<script>
var place=document.getElementById("placeholder")
place.addEventListener("click", function(event) {
if (event.which==1){
var disc = document.createElement("div");
disc.className = "disc";
disc.style.left = (event.pageX - 15) + "px";
disc.style.top = (event.pageY - 15) + "px";
place.appendChild(disc); }
});
</script>HTML Code
<p id="placeholder" style="height:35px; width:100%; border:solid blue 2px;"></p>Preview:
Left click on the area of rectangle to see the effect of mouse click, which draws a red disc with blue dot on center point.
The context menu event usually signals a right-button click, but it may be impossible to prevent the appearance of a context menu when this event occurs.
Here is an example code for displaying alert message on right click instead of displaying context menu. Using this technique, you can create custom context menu instead of default.
HTML Code:
<input type="button" oncontextmenu="alert('Custom menu');return false" value="Right-click me"/>Read Next:How To Handle Keyboard Event In JavaScript
