开发者学堂课程【jQuery 开发教程：jQuery_鼠标事件】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4284
jQuery_鼠标事件
内容介绍：
一、概要
二、讲解事件
一、概要
1、 .click()：点击事件
2、 .dblclick()：双击事件
3、 .hover()：鼠标悬停和离开
4、 .mousedown()：鼠标按下
5、 .mouseenter()：鼠标进入元素
6、 .mouseleave()：鼠标离开元素
7、 .mousemove()：鼠标在元素内移动
8、 .mouseout()：鼠标离开元素（支持事件冒泡）
9、 .mouseover()：鼠标进入元素内（支持事件冒泡）
10、 .mouseup()：鼠标按键被释放
二、讲解事件
1、.click()
创建一个新的工程，创建一个新的 HTML 文件，命名为 click 。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> // 要使用 jQuery 需要先引用，需要将 jQuery 复制粘贴到工程中，然后将其引入。 <script src="jquery-2.2.1.min.js"></script> </head> <body> <p>haha 1</p> <p>haha 2</p> <p>haha 3</p> <p>haha 4</p> // 现在要先采用原生的js来实现一个效果，就是点击p标签，让它弹出当前p标签里的内容。 <script> // 先注释 // 声明一个变量p，此时返回的是一个数组 // var p=document.getElementsByName("p"); // 然后给每个p标签都添加一个点击事件，这个时候就需要采用for循环 // for(var i=0;i<p.length;i++){ // 因为p是一个数组，所以说我们这里给每一个数组里的元素都添加一个click事件，在js里是onclick。 // p[i].onclick=function(){ // alert弹出当前点击对象的this，用this指针，这时候它指向的是当前选中的对象元素。 // alert(this.innerHTML); // } // } // 那么如果此时我们想让jQuery来实现这个效果，应当如何来写呢？ // 书写 jQuery $(function(){ // 直接引用 click ，就不需要 for 循环了。 $("p").click(function(){ // 此时 this 指向的是调用者 p ，html()相当于 innerHTML 。 alert($(this).html()); }) }) </script> </body> </html>
使用 jQuery 比使用 css 实现的效果简单很多。
点击元素将会触发。
效果截图：
单击文字将弹出窗口。
2、dblclick()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-2.2.1.min.js"></script> </head> <body> <p>haha 1</p> <p>haha 2</p> <p>haha 3</p> <p>haha 4</p> <script> $(function(){ $("p").dblclick(function(){ alert($(this).html()); }) }) </script> </body> </html>
单击不行，需要快速双击元素才能触发。
效果截图：
3、hover()
.hover() 相当于 css 中的 hover ，把鼠标悬停在一个元素上会出现一个效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-2.2.1.min.js"></script> <style> // 为了方便观察给 p 标签一个样式 p{ width:300px; beckground-color:aquamarine; } </style> </head> <body> <p>haha 1</p> <p>haha 2</p> <p>haha 3</p> <p>haha 4</p> <script> $(function(){ $("p").hover(function(){ alert($(this).html()); }) }) </script> </body> </html>
把鼠标悬停在元素上时，会自动触发。
效果截图：
鼠标悬停在 haha 1 上弹出窗口。
4、mousedown()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-2.2.1.min.js"></script> <style> p{ width:300px; beckground-color:aquamarine; } </style> </head> <body> <p>haha 1</p> <p>haha 2</p> <p>haha 3</p> <p>haha 4</p> <script> $(function(){ $("p").mousedown(function(){ alert($(this).html()); }) }) </script> </body> </html>
鼠标在元素上按下时会触发。
效果截图：
鼠标在 haha 3 上按下会触发弹出窗口。
5、mouseenter()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-2.2.1.min.js"></script> <style> p{ width:300px; beckground-color:aquamarine; } </style> </head> <body> <p>haha 1</p> <p>haha 2</p> <p>haha 3</p> <p>haha 4</p> <script> $(function(){ $("p").mouseenter(function(){ alert($(this).html()); }) })
当鼠标移动到元素上时就会被触发。
效果截图：
6、mouseleave()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-2.2.1.min.js"></script> <style> p{ width:300px; beckground-color:aquamarine; } </style> </head> <body> <p>haha 1</p> <p>haha 2</p> <p>haha 3</p> <p>haha 4</p> <script> $(function(){ $("p").mouseleave(function(){ alert($(this).html()); }) })
鼠标离开元素时才会被触发，与进入是一对。
效果截图：
7、mousemove()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-2.2.1.min.js"></script> <style> p{ width:300px; beckground-color:aquamarine; } </style> </head> <body> <p>haha 1</p> <p>haha 2</p> <p>haha 3</p> <p>haha 4</p> <script> $(function(){ var i=0; $("p").mousemove(function(){ console.log(i++); }) })
鼠标在元素内移动时会触发。
效果截图：
打开后台 console ，然后在4这里移动，可以看到这边它是不断的在增加的，就是说事件在触发，这就是.mousemove() 。
8、.mouseout() .mouseover()
*冒泡事件：事件按照从规定事件目标到最不特定的事件目标的顺序触发，从事件目标开始往上冒泡，直到页面的最上一级标签。
*捕获事件：与冒泡事件相反，从最上一级标签开始往下查找，直到捕获到目标事件。
9、mouseup()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-2.2.1.min.js"></script> <style> p{ width:300px; beckground-color:aquamarine; } </style> </head> <body> <p>haha 1</p> <p>haha 2</p> <p>haha 3</p> <p>haha 4</p> <script> $(function(){ $("p").mouseup(function(){ alert($(this).html()); }) })
按键被释放才会触发，按下弹起的瞬间才会触发。
效果截图：
打开后台，只有在鼠标被释放时才会被触发。
