Onmouseleave event

Onmouseleave event The event object

JavaScript is performed when the mouse pointer moves out of the pointer:

<img onmouseleave="normalImg(this)" src="smiley.gif" alt="Smiley">

Try it out . . .

"Try it" in more instances below to see more demos.

Definitions and usages

The onmouseleave event is triggered when the mouse removes the element.

Tip: This event is typically used with the onmouseenter event, which is triggered when the mouse moves over the element.

Tip: The onmouseleave event is similar to the onmouseout event. T he only difference is that the onmouseleave event does not support bubbling.

Browser support

The numbers in the table support the version number of the first browser for the event.

Event
onmouseleave 30.0 5.5 Yes 6.1 11.5

Grammar

In HTML:

< element onmouseleave=" myScript "> Give it a try

In JavaScript:

object .onmouseleave=function(){ myScript }; Give it a try

In JavaScript, use the addEventListener() method:

object .addEventListener("mouseleave", myScript ); Give it a try

Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions of IE.

Technical details

Whether to support bubbling: No
Can I cancel: No
Types of events: MouseEvent
Supported HTML tags: All HTML elements, except: slt;bdo>, slt;br?gt;,?lt;head>,?lt;html>, slt;iframe?gt;, slt;meta?gt;,.lt;param>, slt;script&script;,?lt;style>and slt;title>

Onmouseleave event

More instances

This example demonstrates the difference between onmousemove, onmouseleave, and onmouseout events:

<div onmousemove="myMoveFunction()">
I'm going to demonstrate onmousemove!
</div>

<div onmouseleave="myLeaveFunction()">
I'm going to demonstrate onmouseleave!
</div>

<div onmouseout="myOutFunction()">
I'm going to demonstrate onmouseout!
</div>

Try it out . . .

Onmouseleave event The event object