Trending September 2023 # Working &Amp; Examples Of Javascript Onmouseout # Suggested October 2023 # Top 9 Popular

You are reading the article Working &Amp; Examples Of Javascript Onmouseout updated in September 2023 on the website Lifecanntwaitvn.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested October 2023 Working &Amp; Examples Of Javascript Onmouseout

Introduction to JavaScript onmouseout

JavaScript onmouseout is event available in JavaScript that helps you to perform certain actions, execute certain statements, call another function when the mouse is taken out of the area covered by the element. Note that the children elements of the main element on which that event is being used are not affected by this event defined on the parent element. This event in JavaScript is most often used along with JavaScript onmouseover event that gets called when the mouse arrow is taken onto the area of the element. The onmouseout is an event handler property that is provided by GlobalEventHandlers mixing that is responsible for executing the mouseout event in JavaScript.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

The following is the syntax of onmouseout event in JavaScript that tells us how we can call that event and what we need to supply:

elementOfDOM.onmouseout = nameOfFunction;

Where elementOfDOM can be any of the element that is present in the DOM and on which you want to apply the onmouseout event and perform certain actions when the mouse is removed from the area of the element and nameOfFunction is the function name that will contain all the statements and code that you wish to execute on the occurrence of mouseout event.

Working and Usage

Whenever the pointer is often the cursor of the mouse or any other device moved from the area outside the element the mouseout event has occurred. Note that the children of that element are not applied with the onMouseOut event implicitly when we define it for the parent element as in the case of mouseleave event. Any area of the child element is not considered to be the area of element when we are using the onmouseout event in the view that if we take the cursor away from the child element then the function will not be executed.

Mouseout is the event of the MouseEvent interface and the event handler property of this event is onmouseout property. The mouse out event follows a bubbling pattern and is cancelable. Mouseout and mouseleave are two different events. Mouseout event is applied only on the element level while in case of mouseleave event the event applies to all the sub-elements and the main element on which the event is defined. We can use the onmouseout event of JavaScript in multiple situations, scenarios, and cases such as when the mouse is taken away from element we can zoom out the image and on onmouseover event, we can zoom in that event and so on.

Examples of JavaScript onmouseout

Given below are the examples mentioned:

Example #1

We will display an image element in which we will display image named chúng tôi present in our folder in 64-pixel size by default and on the mouse over function, we will increase the size to 128 pixels and after the mouse event is executed then the size will again be resized to the original value that is 64 pixel.

Code:

//Change the size of image to 128 pixel when mouse cursor is moved out of the image function onmouseoverFunction(x) { x.style.height = “128px”; x.style.width = “128px”; } function onmouseoutFunction(x) { x.style.height = “64px”; x.style.width = “64px”; }

We will save this code in the file named chúng tôi and that gives the following output after execution on the browser.

Output:

When we take mouse over the image it gives following output with magnified image:

After the mouse is brought out of the image then the size of the image goes to its original size as shown in below image:

Example #2

We will consider a list of the tasks that need to completed and apply mouse out the event on that list element and study its working.

Code:

//Change the color of the list contents to green when mouse cursor is moved out of list function onmouseoutFunction(x) { x.style.color = “Green”; } function onmouseoverFunction(x) { x.style.color = “Red”; }

We will save this file with the name chúng tôi and run on the browser. It gives the following output after execution.

When we take mouse over the list it gives following output with red contents:

After the mouse is brought out of the list then the color of the list changes to green:

Conclusion

We can use the onmouseout property as the event handler for mouseout event in JavaScript to perform certain actions or execute certain code by calling the function in which it is written onmouseout event. This can be useful in many use cases when web development is considered depending on the requirement. Note that this event is applied to the element level and the children of the element are excluded from the event working.