Onmouseover Event in JavaScript
FREE
Overview
The onmouseover event in JavaScript gets activated when the mouse cursor moves over an HTML element. This event gets activated when the mouse cursor hovers over an element. The onmouseover event does not activate when the user clicks an element, or the cursor leaves an element. For example, an onmouseover event can be used to highlight a hyperlink whenever the user hovers the mouse over it.
Syntax of Onmouseover Event in JavaScript
The onmouseover event has three types of syntax:
-
In HTML:
To define an onmouseover event in HTML, we write onmouseover="function_name" as an element's attribute. The body of the function function_name is defined in JavaScript.
-
In JavaScript:
The above syntax is useful when we have to define an onmouseover event to an HTML element using JavaScript only.
-
Using the addEventListener() method in JavaScript:
The addEventListener() method in JavaScript takes two arguments. First, the keyword "mouseover" so that it knows that we want to define an onmouseover event, and second, a function name.
Note that while using the addEventListener() method, we use mouseover instead of onmouseover.
Whenever the onmouseover event gets triggered, the function function_name gets executed. This function's body is defined in JavaScript.
Parameters of Onmouseover Event in JavaScript
The onmouseover event takes one argument -
- A function name
Whenever we hover over an element that contains an onmouseover event, a function defined by the programmer gets triggered. The function name we specify as the onmouseover event's parameter gets executed whenever an onmouseover event is activated.
Return Value of Onmouseover Event in JavaScript
- Return value - None
The onmouseover event does not return anything.
To confirm that an onmouseover event is working, check whether the function function_name we defined gets executed whenever we hover over the HTML element.
Exceptions of Onmouseover Event in JavaScript
The onmouseover event will not work in the following cases.
-
If we define an onmouseover event for any one of the following HTML tags, the event will not work:
-
<html>
-
<script>
-
<style>
-
<title>
-
<head>
-
<meta>
-
<br>
-
<iframe>
-
<base>
-
<bdo>
-
<param>
-
-
While writing the HTML syntax, if we do not add parenthesis after the writing the function name, that function will never execute. For example:
-
If the function passed as onmouseover event's argument is not declared in the JavaScript code, the event will not work.
In all the three cases above, the onmouseover event does not throw any exception or error. However, the function passed as the event's parameter never gets executed in these cases.
Example
Output: On hovering the mouse cursor over the text, we will get the following output.
In this example, we used <b onmouseover = "func()"> to define an onmouseover event. The function func() contained an alert message in it. So, whenever the user brings the mouse over to the text inside the <b> </b> tag, func() will be called, and hence, we will get an alert message.
How Does Onmouseover Event in JavaScript Work?
The onmouseover event gets triggered when a mouse pointer comes over an element. This event calls the function we specified as the argument whenever this happens. The programmers can define this function as per the webpage requirements.
When a mouse pointer hovers over an element, the onmouseover event gets activated. However, when the mouse pointer moves outside that element, the onmouseover event does not work. This is why the onmouseover event is usually used along with the onmouseout event. The onmouseout event is very similar to the onmouseover event, the only difference being, onmouseout gets triggered when a mouse pointer leaves an element.
For example, if we use an onmouseover event to highlight a text element containing a hyperlink, the text will get highlighted once the mouse hovers over the text element. However, when the mouse pointer leaves the text element, the text colour will not change to its original colour. This is because we did not define an onmouseout event.
More Examples
Example 1 - Changing the Color and Text Content of an Element
In this example, we will change the color as well as the text written inside a paragraph element.
Output:
-
Before moving the mouse cursor over the text:
-
After moving the mouse cursor over the text:
Explanation: In the above example, we created an onmouseover event. Once it was activated, this event called the function func(). We defined func() to change the color of the paragraph with the id equal to para1 and then change the text written inside this paragraph as well.
Example 2 - Updating the Text Present in an Element
In this example, we will create a webpage to display a counter that counts the number of times an onmouseover event was triggered. Initially, the counter will display the number 0. The value of this number will increase whenever the user triggers an onmouseover event.
Output:
-
Before hovering the mouse over the number:
-
After hovering the mouse 5 times over the number:
Explanation: In the above example, on line 7, we created a span element with an id updater. Initially, this span had the text "0" written inside it. We used addEventListener to add an onmouseover event to this span element. In JavaScript, we created a global variable counter (initialized to 0) to keep the count of triggered events. Once the event was triggered, the function triggerCounter() would execute. The triggerCounter() function was defined to increment the value of counter by 1. Then, it replaced the text written inside the span with the updated counter.
Supported Browser
The onmouseover event is supported by the following browsers.
- Google Chrome
- Internet Explorer
- Microsoft Edge
- Mozilla Firefox
- Opera
- Safari
Conclusion
- An onmouseover event gets activated when the mouse cursor points over an HTML element.
- Whenever an onmouseover event is activated, a function call is made in the backend. A programmer can define this function as per his/her needs.
- The onmouseover event works on most of the HTML elements except for some elements.