码农教程 - 一技在手,衣食无忧! tools

目录

onmouseenter Event

❮ Previous Events Reference Next ❯

Example

Call a function when moving the mouse pointer onto an image:

<img onmouseenter="bigImg(this)" src="smiley.gif" alt="Smiley">
Try it Yourself »

More examples below.

Description

The onmouseenter event occurs when the mouse pointer enters an element.

The onmouseenter event is often used together with the onmouseleave event, which occurs when the mouse pointer leaves an element.

The onmouseenter event is similar to the onmouseover event. The difference is that the onmouseenter event does not bubble (does not propagate up the document hierarchy). See "More Examples" at the bottom of this page to better understand the differences.

Mouse Events

Event Occurs When
onclick The user clicks on an element
oncontextmenu The user right-clicks on an element
ondblclick The user double-clicks on an element
onmousedown A mouse button is pressed over an element
onmouseenter The pointer is moved onto an element
onmouseleave The pointer is moved out of an element
onmousemove The pointer is moving over an element
onmouseout The mouse pointer moves out of an element
onmouseover The mouse pointer is moved over an element
onmouseup The mouse button is released over an element

See Also:

The Mouse Event Object

Tutorial:

JavaScript Events

Syntax

In HTML:

< element onmouseenter=" myScript">
Try it Yourself »

In JavaScript:

object.onmouseenter = function(){ myScript};
Try it Yourself »

In JavaScript, using the addEventListener() method:

object.addEventListener("mouseenter", myScript);
Try it Yourself »

Technical Details

Bubbles: No
Cancelable: No
Event type: MouseEvent
HTML tags: All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>
DOM Version: Level 2 Events

More Examples

Example

This example demonstrates the difference between the onmousemove, onmouseenter and mouseover events:

<div onmousemove="myMoveFunction()">
  <p id="demo1">I will demonstrate onmousemove!</p>
</div>

<div onmouseenter="myEnterFunction()">
  <p id="demo2">I will demonstrate onmouseenter!</p>
</div>

<div onmouseover="myOverFunction()">
  <p id="demo3">I will demonstrate onmouseover!</p>
</div>
Try it Yourself »

Browser Support

onmouseenter is a DOM Level 2 (2001) feature.

It is fully supported in all browsers:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11


❮ Previous Events Reference Next ❯