鼠标事件mousemove、mouseover、mouseout、mouseenter、mouseleave

最新推荐文章于 2024-04-25 15:58:41 发布

七夜丨鸣

最新推荐文章于 2024-04-25 15:58:41 发布

阅读量3.3w

点赞数 4

本文链接：https://blog.csdn.net/qyaroon/article/details/51188361

版权

Mousemove：

当鼠标指针在元素内移动时，mousemove事件就会被触发，任何HTML元素都可以接受此事件。

Mousemove 事件是当鼠标指针移动时触发的，即使是一个像素。这意味着多个事件在短时间内被触发。如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题。因此，优化mousemove处理程序尽可能，这一点很重要，当不再需要他们时应尽快解除绑定。

一个常见的模式是在mousedown处理器内部绑定mousemove处理器，并在一个相应mouseup处理函数解除绑定。要实现这一系列事件，请记住，与 mouseup 事件相比，mouseup 事件可能会被发送到不同的 HTML 元素上。由于这个原因，mouseup 事件通常应该绑定在更高的 DOM 树中，例如 <body>。

<div id="outer">
  Outer
  <div id="inner"> Inner</div>
</div>
<div id="other">
  Trigger the handler
</div>
<div id="log"></div>

Mouseover VS Mouseenter

Mouseover

由于此事件类型冒泡，可能导致引起的很多头痛的问题。例如，在这个例子中当鼠标指针移出Inner元素，mouseover事件将被发送到Inner元素，然后冒泡到Outer元素。这可能会不合时宜的触发绑定的mouseover处理函数。

Mouseenter

Mouseenter JavaScript事件是Internet Explorer专有的。由于该事件在平时很有用，jQuery的模拟这一事件，以便它可用于所有浏览器。该事件在鼠标移入到元素上时被触发。任何HTML元素都可以接受此事件。

例子：

当触发 mouseover 和 mouseenter 事件时，显示鼠标移出对象的次数。当鼠标移入绑定 mouseover 事件元素的子元素时，mouseover 事件同样会被触发。但是，只有在绑定 mouseenter 事件的元素上，将鼠标移入时，才会触发该事件。

Mouseout VS Mouseleave

Mouseout:

由于此事件类型冒泡，可能导致引起的很多头痛的问题。例如，在这个例子中当鼠标指针移出Inner元素，mouseout事件将被发送到Inner元素，然后冒泡到Outer元素。这可能会不合时宜的触发绑定的mouseout处理函数。

Mouseleave

Mouseleave JavaScript事件是Internet Explorer专有的。。由于该事件在平时很有用，jQuery的模拟这一事件，以便它可用于所有浏览器。该事件在鼠标离开元素上时被触发。任何HTML元素都可以接受此事件。

例子：

当触发 mouseout 和 mouseleave 事件时，显示鼠标移出对象的次数。当鼠标移出绑定 mouseout 事件元素的子元素时，mouseout 事件同样会被触发。但是，只有在绑定 mouseleave 事件的元素上，将鼠标移出时，才会触发该事件。

<!DOCTYPE html>
<html>
<head>
  <style>
<span style="white-space:pre">	</span>div.out {width:40%;height:120px;margin:0 15px;background-color:#D6EDFC;float:left;}
<span style="white-space:pre">	</span>div.in {width:60%;height:60%;background-color:#FFCC00;margin:10px auto;}
<span style="white-space:pre">	</span>p {line-height:1em;margin:0;padding:0;}
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <div class="out overout"><p>move your mouse</p><div class="in overout"><p>move your mouse</p><p>0</p></div><p>0</p></div>
  <div class="out enterleave"><p>move your mouse</p><div class="in enterleave"><p>move your mouse</p><p>0</p></div><p>0</p></div>
  <script>
<span style="white-space:pre">	</span>var i = 0;
<span style="white-space:pre">	</span>$("div.overout").mouseout(function(){
 <span style="white-space:pre">	</span>   $("p:first",this).text("mouse out");
 <span style="white-space:pre">	</span>   $("p:last",this).text(++i);
<span style="white-space:pre">	</span>}).mouseover(function(){
  <span style="white-space:pre">	</span>$("p:first",this).text("mouse over");
<span style="white-space:pre">	</span>});
<span style="white-space:pre">	</span>var n = 0;
<span style="white-space:pre">	</span>$("div.enterleave").bind("mouseenter",function(){
 <span style="white-space:pre">	</span>   $("p:first",this).text("mouse enter");
<span style="white-space:pre">	</span>}).bind("mouseleave",function(){
  <span style="white-space:pre">	</span>  $("p:first",this).text("mouse leave");
  <span style="white-space:pre">	</span>  $("p:last",this).text(++n);
<span style="white-space:pre">	</span>});
  </script>
</body>
</html>

参考自：http://www.jquery123.com/category/events/mouse-events/

七夜丨鸣

关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
鼠标事件mousemove、mouseover、mouseout、mouseenter、mouseleave

Mousemove：当鼠标指针在元素内移动时，mousemove事件就会被触发，任何HTML元素都可以接受此事件。Mousemove 事件是当鼠标指针移动时触发的，即使是一个像素。这意味着多个事件在短时间内被触发。如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题。因此，优化mousemove处理程序尽可能，这一点很重要，当不再需要他们时应尽快解除
复制链接

扫一扫