慕课网

第1章事件介绍
视频：1-1 jQuery基础(三)—事件篇...(01:41)

解锁即可观看《前端工程师》完整课程视频

立即解锁

前端工程师

前端入门如同写字，如果你不知道从哪开始，那就选择前端（含Vue3.x，React17,TS）

【第1周】HTML5基础语法与标签

【第2周】CSS3基础语法与盒模型

【第3周】CSS3浮动定位与背景样式

【第4周】CSS3动画与穷游首页开发实战

【第5周】JS基础语法与表达式

【第6周】JS流程控制语句与数组

【第7周】JS函数与DOM

【第8周】面向对象

【第9周】项目实战：仿穷游JS特效开发

【第10周】ES6基础入门

【第11周】ES6语法扩展

【第12周】ES6之Promise与Class类

【第13周】ES6之Module模块与Babel编译

【第14-15周】HTTP 协议、存储、Ajax

【第16周】项目实战：仿穷游组件化开发

【第17周】移动基础

【第18周】移动进阶之高效开发

【第19周】项目实战：仿穷游移动webapp开发

【第20周】小程序基础与慕课小程序实战

【第21-22周】Sass基础与Vue.js基础语法

【第23周】项目实战：Vue.js仿京东到家电商全栈项目前端开发（上）

【第24-25周】项目实战：Vue.js仿京东到家电商全栈项目前端（下）

【第26周】全栈必备基础Node.js

【第27周】koa2中间件与MongoDB数据库

【第28-29周】项目实战：node.js仿京东到家电商全栈项目后端开发

【第30周】TypeScript与React.js基础语法

【第31-32周】React旅游网开发与工程化

【第33周】就业必备基础技术面试分析

【第34周】就业必备框架与全栈技术面试分析

jQuery鼠标事件之mouseenter与mouseleave事件

用交互操作中，经常需要知道用户操作鼠标是否有移到元素内部或是元素外部，因此jQuery提供了一个mouseenter和mouseleave的快捷方法可以监听用户移动到内部的操作

使用上非常简单，三种参数传递方式与mouseover和mouseout是一模一样的，所以这里不再重复，主要讲讲区别，下面以mouseenter为例：

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

mouseenter事件和mouseover的区别

关键点就是：冒泡的方式处理问题

简单的例子：

mouseover为例：

<div class="aaron2">
    <p>鼠标离开此区域触发mouseleave事件</p>
</div>

如果在p元素与div元素都绑定mouseover事件，鼠标在离开p元素，但是没有离开div元素的时候，触发的结果:

p元素响应事件
div元素响应事件

这里的问题是div为什么会被触发？原因就是事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发

所以在这种情况下面，jQuery推荐我们使用 mouseenter事件

mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发

这就是最本质的区别，具体的对应可以参考右边的案例：

PS：同学可以根据右侧代码，自己写出mouseout与mouseleave的区别哦~

任务

?不会了怎么办

index.html

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> .left div, .right div { width: 350px; height: 150px; padding: 5px; margin: 5px; border: 1px solid #ccc; } p{ height: 50px; border: 1px solid red; margin: 30px; } .left div { background: #bbffaa; } .right div { background: yellow; } </style> <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script> </head> <body> <h2>.mouseover()方法</h2> <div class="left"> <div class="aaron1"> <p>鼠标离开此区域触发mouseover事件</p> <a>mouseover事件触发次数：</a><br/> <a>mouseover冒泡事件触发次数：</a> </div> </div> <h2>.mouseenter()方法</h2> <div class="right"> <div class="aaron2"> <p>鼠标进入此区域触发mouseenter事件</p> <a>mouseenter事件触发次数：</a><br/> <a>mouseenter冒泡事件触发次数：</a> </div> </div> <br/> <script type="text/javascript"> var i = 0; $(".aaron1 p").mouseover(function(e) { $(".aaron1 a:first").html('mouseover事件触发次数：' + (++i)) }) var n = 0; $(".aaron1").mouseover(function() { $(".aaron1 a:last").html('mouseover冒泡事件触发次数：' + (++n)) }) </script> <script type="text/javascript"> var i = 0; $(".aaron2 p").mouseenter(function(e) { $(".aaron2 a:first").html('mouseenter事件触发次数：' + (++i)) }) var n = 0; $(".aaron2").mouseenter(function() { $(".aaron2 a:last").html('mouseenter冒泡事件触发次数：' + (++n)) }) </script> </body> </html>

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

2-5 jQuery鼠标事件之mouseenter与mouse...

jQuery鼠标事件之mouseenter与mouseleave事件

任务

写笔记

收藏课程后，能更快找到我哦～