![]() A programmer can define this function as per his/her needs. Whenever an onmouseover event is activated, a function call is made in the backend.An onmouseover event gets activated when the mouse cursor points over an HTML element. ![]() The onmouseover event is supported by the following browsers. Then, it replaced the text written inside the span with the updated counter. The triggerCounter() function was defined to increment the value of counter by 1. Once the event was triggered, the function triggerCounter() would execute. In JavaScript, we created a global variable counter (initialized to 0) to keep the count of triggered events. We used addEventListener to add an onmouseover event to this span element. Initially, this span had the text "0" written inside it. In the above example, on line 7, we created a span element with an id updater. In this example, we will change the color as well as the text written inside a paragraph element. More Examples Example 1 - Changing the Color and Text Content of an Element This is because we did not define an onmouseout event. However, when the mouse pointer leaves the text element, the text colour will not change to its original colour. The onmouseout event is very similar to the onmouseover event, the only difference being, onmouseout gets triggered when a mouse pointer leaves an element.įor 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. This is why the onmouseover event is usually used along with the onmouseout event. However, when the mouse pointer moves outside that element, the onmouseover event does not work. When a mouse pointer hovers over an element, the onmouseover event gets activated. The programmers can define this function as per the webpage requirements. This event calls the function we specified as the argument whenever this happens. The onmouseover event gets triggered when a mouse pointer comes over an element. How Does Onmouseover Event in JavaScript Work? So, whenever the user brings the mouse over to the text inside the tag, func() will be called, and hence, we will get an alert message. The function func() contained an alert message in it. In this example, we used to define an onmouseover event. While writing the HTML syntax, if we do not add parenthesis after the writing the function name, that function will never execute. If we define an onmouseover event for any one of the following HTML tags, the event will not work: The onmouseover event will not work in the following cases. ![]() Exceptions of Onmouseover Event in JavaScript 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. The onmouseover event does not return anything. Return Value of Onmouseover Event in JavaScript The function name we specify as the onmouseover event's parameter gets executed whenever an onmouseover event is activated. Whenever we hover over an element that contains an onmouseover event, a function defined by the programmer gets triggered. The onmouseover event takes one argument. Parameters of Onmouseover Event in JavaScript This function's body is defined in JavaScript. Whenever the onmouseover event gets triggered, the function function_name gets executed. Note that while using the addEventListener() method, we use mouseover instead of onmouseover. First, the keyword "mouseover" so that it knows that we want to define an onmouseover event, and second, a function name. The addEventListener() method in JavaScript takes two arguments. Object.addEventListener( "mouseover", function_name)
0 Comments
Leave a Reply. |