JavaScript onmouseout Event

February 8, 2021 10:45 am IST

You are Here:

JavaScript onmouseout Event

The onmouseout event occurs when the mouse pointer is moved out of an element or one of its children.

Note: Unlike onmouseleave event, the onmouseout event will bubble, i.e., The element with onmouseout event will be affected when the mouse pointer is moved out of its child element.

onmouseout Event as Attribute

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <p onmouseout="myFunction()">Touch me and go</p> <script> function myFunction(){ document.write("You touched"); } </script> </body> </html>

Run

Syntax

As Attribute

As Property

object.onmouseout = function(){ // code };

Using Event Listener

object.addEventListener("mouseout" , myScript);

onmouseout Event as Property

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <p>Touch anywhere and go</p> <script> function myFunction(){ document.write("You touched"); } document.onmouseout = myFunction; </script> </body> </html>

Run

Using addEventListener() Method

Note: The addEventListener() method is not supported in Internet Explorer 8 and below.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <p>Touch me and go</p> <script> var x = document.getElementsByTagName("p")[0]; function myFunction(){ document.write("You touched"); } x.addEventListener("mouseout", myFunction); </script> </body> </html>

Run