What is the Mouseover Event Listener in JavaScript? A Complete Guide
☰Fullscreen
Table of Content:
The "mouseover" event in JavaScript is triggered when the mouse pointer moves over an element on a webpage. You can use an event listener to execute a function when the "mouseover" event occurs on an element.
Here is an example of using an event listener to execute a function when the mouse moves over a button:
<span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myButton"</span><span class="tag">></span><span class="pln">Hover over me!</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><script></span><span class="pln"> </span><span class="com">// Define the function to be executed when the mouse moves over the button</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> buttonHovered</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">"Mouse is hovering over the button!"</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// Attach the function as an event listener to the "mouseover" event on the button</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"myButton"</span><span class="pun">).</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">"mouseover"</span><span class="pun">,</span><span class="pln"> buttonHovered</span><span class="pun">);</span><span class="pln"> </span><span class="tag"></script></span>
In this example, the function buttonHovered is defined and is attached as an event listener to the "mouseover" event on the button with the ID "myButton". When the mouse moves over the button, the function will be executed and an alert message will be displayed.
Event listeners are a powerful tool for creating interactive and dynamic webpages. They can be attached to a wide range of events on different elements, such as mouse clicks, keyboard input, form submissions, and more.
You can copy the whole code and try it.
<span class="pln"> </span><span class="dec"><!DOCTYPE html></span><span class="pln"> </span><span class="tag"><html></span><span class="pln"> </span><span class="tag"><body></span><span class="pln"> </span><span class="tag"><h2></span><span class="pln">Example of mouseover event Listener in javascript</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myButton"</span><span class="tag">></span><span class="pln">Hover over me!</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"></body></span><span class="pln"> </span><span class="tag"></html></span><span class="pln"> </span><span class="tag"><script></span><span class="pln"> </span><span class="com">// Define the function to be executed when the mouse moves over the button</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> buttonHovered</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">"Mouse is hovering over the button!"</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// Attach the function as an event listener to the "mouseover" event on the button</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"myButton"</span><span class="pun">).</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">"mouseover"</span><span class="pun">,</span><span class="pln"> buttonHovered</span><span class="pun">);</span><span class="pln"> </span><span class="tag"></script></span><span class="pln"> </span>
No Questions Data Available.
No Program Data.