从这一节开始,我们正式开始实操jQuery中的各种事件。事件操作是jQuery核心之一,也是本书的重中之重。

在jQuery中,常见的鼠标事件如下表所示。

鼠标事件
事件 说明
click 鼠标单击事件
mouseover 鼠标移入事件
mouseout 鼠标移出事件
mousedown 鼠标按下事件
mouseup 鼠标松开事件
mousemove 鼠标移动事件

鼠标事件非常多,这里我们只列出最实用的,免得增加大家的记忆负担。从上表可以看出,jQuery事件比JavaScript事件只是少了“on”前缀。例如鼠标单击事件在JavaScript中是onclick,而在jQuery中是click。

jQuery事件的语法很简单,我们都是往事件方法中插入一个匿名函数function(){},如图所示。

一、鼠标单击

单击事件click,我们在之前已经接触过非常多了,例如点击某个按钮弹出一个提示框。这里要特别注意一点,单击事件不只是按钮才有,我们可以为任何元素添加单击事件!

举例:为div元素添加单击事件

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div { display: inline-block; width: 80px; height: 24px; line-height: 24px; font-family:"微软雅黑"; font-size:15px; text-align: center; border-radius: 3px; background-color: deepskyblue; color: White; cursor: pointer; } div:hover {background-color: dodgerblue;} </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("div").click(function(){ alert("玩我么?") }) }) </script> </head> <body> <div>调试代码</div> </body> </html>

浏览器预览效果如图所示。

分析:

这里我们使用div元素模拟出一个按钮,并且为它添加了单击事件。当我们点击【调试代码】按钮之后,就会弹出提示框。之所以举这个例子,也是给小伙伴们说明一点:我们都可以为任何元素添加单击事件!

在实际开发中,为了获得更好的用户体验,我们一般不会使用表单按钮,而更倾向于使用其他元素结合CSS模拟出来。因为表单按钮的外观实在令人不敢恭维。

举例:自动触发点击事件

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("#btn").click(function () { alert("欢迎来到绿叶学习网!"); }).click(); }) </script> </head> <body> <input id="btn" type="button" value="按钮"> </body> </html>

浏览器预览效果如图所示。

分析:

在这个例子中,我们使用click()方法自动触发鼠标点击事件。在实际开发中,自动触发事件这个小技巧非常有用,像我们常见的图片轮播效果中就用到。

二、鼠标移入和鼠标移出

当用户将鼠标移入到某个元素上面时,就会触发mouseover事件。如果将鼠标移出某个元素时,就会触发mouseout事件。mouseover和mouseout平常都是形影不离的。

mouseover和mouseout分别用于控制鼠标“移入”和“移出”这两种状态。例如在下拉菜单导航中,鼠标移入会显示二级导航,鼠标移出则会收起二级导航。

举例:移入移出

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("div").mouseover(function(){ $(this).css("color", "red"); }) $("div").mouseout(function () { $(this).css("color", "black"); }) }) </script> </head> <body> <div>绿叶学习网</div> </body> </html>

浏览器预览效果如图所示。

分析:

这里的(this)指向的其实就是触发当前事件的元素,也就是div元素。在这个例子中,(this)等价于$(“div”)。

$(this)的使用是非常复杂的,这里我们只是让初学者熟悉一下。在下一章再给小伙伴们详细讲解。

上面这个例子虽然简单,但是方法已经交给大家了。大家可以尝试使用mouseover和mouseout这两个事件来设计下拉菜单效果,考验能力的时候到了。

举例:链式调用

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("div").mouseover(function(){ $(this).css("color", "red"); }).mouseout(function () { $(this).css("color", "black"); }) }) </script> </head> <body> <div>绿叶学习网</div> </body> </html>

浏览器预览效果如图所示。

分析:

$("div").mouseover(function(){ $(this).css("color", "red"); }).mouseout(function () { $(this).css("color", "black"); })

上面代码其实等价于:

$("div").mouseover(function(){ $(this).css("color", "red"); }) $("div").mouseout(function () { $(this).css("color", "black"); })

在jQuery中,如果对同一个对象进行多种操作,则可以使用链式调用的语法。链式调用是jQuery中经典语法之一,不仅节省代码量,还可以提高代码的性能效率。

三、鼠标按下和鼠标松开

当用户按下鼠标时,会触发mousedown事件;当用户松开鼠标时,则会触发mouseup事件。

mousedown表示鼠标按下的一瞬间所触发的事件,而mouseup表示鼠标松开的一瞬间所触发的事件。当然我们都知道,只有“先按下”才能“再松开”。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("#btn").mousedown(function(){ $("h1").css("color", "red"); }) $("#btn").mouseup(function () { $("h1").css("color", "black"); }) }) </script> </head> <body> <h1>绿叶学习网</h1> <hr /> <input id="btn" type="button" value="按钮" /> </body> </html>

浏览器预览效果如图所示。

分析:

在实际开发中,mousedown、mouseup和mousemove经常用来配合实现拖拽、抛掷等效果,不过这些效果非常复杂,感兴趣的小伙伴可以看看本系列图书中的《从0到1:HTML5 Canvas动画开发》。