JavaScript

JavaScript Mouse Events

2 years ago
by Naima Aftab
Events operate the interaction between HTML and JavaScript and happen when the web page is manipulated by either the user or the browser, for instance, clicking a button, pressing a key, or resizing a window are all considered events. There is a huge classification of JavaScript events, however, in this write-up, we will explore the category of JavaScript mouse events.

JavaScript Mouse Events

As suggested by the name JavaScript mouse events are triggered by the interaction of the mouse with the web pages and these events are a part of MouseEvent Object.

JavaScript mouse events are

  1. onclick
  2. oncontextmenu
  3. ondblclick
  4. onmousedown
  5. onmouseenter
  6. onmouseleave
  7. onmousemove
  8. onmouseout
  9. onmouseover
  10. onmouseup

This write-up discusses these one-by-one in depth.

1. onclick Event

When a user clicks on an element the onclick event happens. It bubbles and can be canceled. This event supports all HTML tags other than <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> and is included in DOM level 2.

Syntax

The syntax of the onclick event is provided below.

HTML Syntax

<element onclick="funtionName()">

JavaScript Syntax

object.onclick = function(){script};

JavaScript addEventListener() Syntax

object.addEventListener("click", script);

Example

<!DOCTYPE html>

<html>

<body>

<p> Click the button below.</p>

<button onclick="functionName()">Click here</button>

<p id="tutorial"></p>

<script>

function functionName() {

document.getElementById("tutorial").innerHTML = "Onclick Event";

}

</script>

</body>

</html>

In the above example, a button will appear on the web page. After clicking the button the onclick event will happen and a message will appear.

Output

Before the button is clicked.

After the button is clicked, the message will appear.

2. oncontextmenu Event

When the context menu of an element is opened using the right-click, the oncontextmenu event happens. It bubbles and is also cancelable. This event supports all HTML tags and is included in DOM version 3.

Syntax

The syntax of oncontextmenu event is given below.

HTML Syntax

<element oncontextmenu="funtionName()">

JavaScript Syntax

object.oncontextmenu = function(){script};

JavaScript addEventListener() Syntax

object.addEventListener("contextmenu", script);

Example

<!DOCTYPE html>

<html>

<body>

<p oncontextmenu="functionName()">Right-click on me.</p>

<script>

function functionName() {

alert("You just right-clicked!");

}

</script>

</body>

</html>

In the above example, when you right click on the text, the oncontextmenu event will trigger and first a dialoag box will appear telling that you just performed a right click and after you click OK on the dialog box the context menu will open.

Output

When you run the above example the following text will appear.

Now when you will right-click the text, the dialog box will appear.

After clicking OK, the context menu will open.

3. ondblclick Event

When an element is double-clicked, the ondblclick event happens. It bubbles and can be canceled. This event supports all HTML tags other than <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> and is included in DOM version 2.

Syntax

The syntax of the ondblclick event is provided below.

HTML Syntax

<element ondblclick="functionName()">

JavaScript Syntax

object.ondblclick = function(){script};

JavaScript addEventListener() Syntax

object.addEventListener("dblclick", script);

Example

<!DOCTYPE html>

<html>

<body>

<button ondblclick="functionName()">Double-click me.</button>

<p id="tutorial"></p>

<script>

function functionName() {

document.getElementById("tutorial").innerHTML = "I am learning JavaScript Events.";

}

</script>

</body>

</html>

In the above example, a button will appear and when you will double click on the button the ondblclick event triggers and a message will appear. Here is the output.

Output

Before double clicking the button.

After double clicking the button.

4. onmousedown Event

When you press a mouse button while keeping the mouse over an HTML element, the onmousedown event happens. It bubbles and can be canceled. This event supports all HTML tags other than <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> and is included in DOM version 2.

Syntax

The syntax of the onmousedown event is as follows.

HTML Syntax

<element onmousedown="funtionName()">

JavaScript Syntax

object.onmousedown = function(){script};

JavaScript addEventListener() Syntax

object.addEventListener("mousedown", script);

Example

<!DOCTYPE html>

<html>

<body>

<button id="jsEvents" onmousedown="mouseDown()"><strong>Click Here</strong></button>

<script>

function mouseDown() {

document.getElementById("jsEvents").style.color = "red";

}

</script>

</body>

</html>

In the above example, a button will appear on the web page. When you will right click the button while keeping the mouse pointer on the button, the onmousedown event will trigger and the text on the button will change its color from black to red.

Output

The button before clicking.

After right-clicking the mouse while the cursor stays on the button.

5. onmouseenter Event

When you bring a mouse pointer on an HTML element, the onmouseenter event happens.It cannot bubble and can neither be canceled. This event supports all HTML tags other than <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> and is included in DOM version 2.

Syntax

The syntax of the onmouseenter event is as follows.

HTML Syntax

<element onmouseenter="funtionName()">

JavaScript Syntax

object.onmouseenter = function(){script};

JavaScript addEventListener() Syntax

object.addEventListener("mouseenter", script);

Example

<!DOCTYPE html>

<html>

<body>

<h1 id="tutorial" onmouseenter="mouseEnter()">Bring the mouse pointer over me.</h1>

<script>

function mouseEnter() {

document.getElementById("tutorial").style.color = "red";

}

</script>

</body>

</html>

In the above example, a text appear on the web page. When you bring the your mouse cursor over the text, the onmouseenter event will trigger and the color will change to red.

Output

Before bring the mouse pointer on the text.

After bringing the mouse cursor over the text.

6. onmouseleave Event

When you move your mouse pointer away from an element, the onmouseleave event happens. It cannot bubble and can neither be canceled. This event supports all HTML tags other than <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> and is included in DOM version 2.

Syntax

The syntax of the onmouseleave event is as follows.

HTML Syntax

<element onmouseleave="functionName()">

JavaScript Syntax

object.onmouseleave = function(){script};

JavaScript addEventListener() Syntax

object.addEventListener("mouseleave", script);

Example

<!DOCTYPE html>

<html>

<body>

<h1 id="tutorial" onmouseleave="mouseLeave()">Bring the mouse pointer over me.</h1>

<script>

function mouseLeave() {

document.getElementById("tutorial").style.color = "green";

}

</script>

</body>

</html>

In the above example, a text appear on the web page. When you move mouse cursor away from the text, the onmouseenter event will trigger and the color will change to green.

Output

Before bringing the mouse pointer away from the text.

The color will change when mouse pointer moves away.

7. onmousemove Event

When you move your mouse cursor while keeping it on an element, the onmousemove event happens. The only difference between this event and onmouseenter event is that it bubbles and can be canceled. This event supports all HTML tags other than <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> and is included in DOM version 2.

Syntax

The syntax of onmousemove is given below.

HTML Syntax

<element onmousemove="functionName()">

JavaScript Syntax

object.onmousemove = function(){script};

JavaScript addEventListener() Syntax

object.addEventListener("mousemove", script);

Example

<!DOCTYPE html>

<html>

<body>

<h1 id="tutorial">JavaScript Events</h1>

<p id="demo"></p>

<script>

document.getElementById("tutorial").addEventListener("mousemove", function(event) {

funtionName(event);

});

function funtionName(event) {

alert("This is onmousemove event.")

}

</script>

</body>

</html>

In the above example, when you move the mouse cursor over the text the onmousemove event will happen and a dialog box will appear informing you that the onmousemove event has been triggered.

Output

Before moving the mouse over the text.

After.

8. onmouseout Event

When a mouse cursor leaves an element or any of its children, the onmouseout event happens. The only difference between this and onmouseleave is that it bubbles and can be canceled. This event supports all HTML tags other than <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> and is included in DOM version 2.

Syntax

The syntax of the onmouseout event is given below.

HTML Syntax

<element onmouseout="functionName()">

JavaScript Syntax

object.onmouseout = function(){script};

JavaScript addEventListener() Syntax

object.addEventListener("mouseout", script);

Example

<!DOCTYPE html>

<html>

<body>

<button id="tutorial" onmouseout="mouseOut()"><h1>Bring mouse here</h1></button>

<script>

function mouseOut() {

document.getElementById("tutorial").style.color = "green";

}

</script>

</body>

</html>

In the above example, you move the mouse cursor away from the button, the onmouseout event will trigger and the color of the text on the button will change to green.

Output

Before

After

9. onmouseover Event

When you bring your mouse cursor on an element or any of its children, the onmouseover event happens. It bubbles and can be canceled. This event supports all HTML tags other than <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> and is included in DOM version 2.

Syntax

The syntax of the onmouseover event is provided below.

HTML Syntax

<element onmouseover="functionName()">

JavaScript Syntax

object.onmouseover = function(){script};

JavaScript addEventListener() Syntax

object.addEventListener("mouseover", script);

Example

<!DOCTYPE html>

<html>

<body>

<button id="tutorial" onmouseover="mouseOver()"><h1>Bring mouse here</h1></button>

<script>

function mouseOver() {

document.getElementById("tutorial").style.color = "red";

}

</script>

</body>

</html>

In the above example, you move the mouse cursor on the button, the onmouseover event will trigger and the color of the text on the button will change to red.

Output

Before

After

10. onmouseup Event

When a mouse button is released while keeping the pointer on an element the onmouseup event happens. It bubbles and can be canceled. This event supports all HTML tags other than <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> and is included in DOM version 2.

Syntax

The syntax of onmouseup event is provided below.

HTML Syntax

<element onmouseup="functionName()">

JavaScript Syntax

object.onmouseup = function(){script};

<strong>JavaScript addEventListener() Syntax</strong>

object.addEventListener("mouseup", script);

Example

<!DOCTYPE html>

<html>

<body>

<button id="jsEvents" onmouseup="mouseUp()"><strong>Click Here</strong></button>

<script>

function mouseUp() {

document.getElementById("jsEvents").style.color = "green";

}

</script>

</body>

</html>

In the above example, a button will appear. When you right click the button and release while keeping the mouse pointer on the button, the onmouse up event will trigger and the color of the text on the button will change to green.

Output

Before right clicking the button.

After releasing the button while keep the mouse pointer on it.

Conclusion

Events that occur due to mouse movements are referred to as JavaScript mouse events. Events that are classified into the category of JavaScript mouse events are onclick Event, oncontextmenu Event, ondblclick Event, onmousedown Event, onmouseenter Event, onmouseleave Event, onmousemove Event, onmouseout Event, onmouseover Event, and onmouseup Event. All these events are discussed in detail along with appropriate example.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.

View all posts