本节我们学习 jQuery 中的事件的使用，jQuery 是专门为响应 HTML 页面中的事件而设计的。我们在使用时，需要遵循以下原则：
- 把所有
jQuery代码置于事件处理函数中。 - 把所有事件处理函数置于文档就绪事件处理器中。
- 把
jQuery代码置于单独的.js文件中。 - 如果存在名称冲突，则重命名
jQuery库。
什么是事件
首先我们要知道什么是事件，页面对不同访问者的响应叫做事件，例如点击某个按钮，选择单选框或复选框，滑动鼠标等，这些都可以称为事件。
jQuery常用事件
在 jQuery 中，大多数 DOM 事件都有一个相应的 jQuery 方法。例如我们前面提到过的点击事件的对应的方法为 click() 方法。
click点击事件
当我们点击元素时，会发生 click 点击事件，这需要用到 click() 方法。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
alert("hello, xkd!");
});
});
</script>
</head>
<body>
<div>
<button>点击按钮</button>
</div>
</body>
</html>
在浏览器中的演示效果：
[图片上传失败...(image-1262b3-1629816251788)]
dblclick双击事件
当我们双击元素时，会触发 dblclick 双击事件。触发双击事件需要用到 dblclick() 方法。
注意 dblclick 事件也会产生 click 事件，所有如果这两个事件都被应用于同一个元素，则会产生问题。
示例：
例如双击 p 元素并隐藏这个元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div>
<p>双击隐藏此元素</p>
</div>
</body>
</html>
在浏览器的演示效果：
[图片上传失败...(image-b8aa34-1629816251788)]
鼠标事件
jQuery 的鼠标有四个相关的事件，包括鼠标指针进入、离开、按下、释放：
- 当鼠标指针穿过（进入）被选元素时，可以通过
mouseenter()方法触发mouseenter事件。 - 当鼠标指针离开 HTML 元素时，可以通过
mouseleave()方法触发mouseleave事件。 - 当鼠标指针移动到元素上方，并按下鼠标按键时，可以通过
mousedown()方法触发mousedown事件。 - 当在元素上松开鼠标按钮时，可以通过
mouseup()方法触发mouseup事件。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$(".one").mouseenter(function(){
alert("mouseenter事件");
});
$(".two").mouseleave(function(){
alert("mouseleave事件");
});
$(".three").mousedown(function(){
alert("mousedown事件");
});
$(".four").mouseup(function(){
alert("mouseup事件");
});
});
</script>
</head>
<body>
<div>
<p class="one">mouseenter事件，鼠标指针移动到元素上，弹出弹出层</p>
<p class="two">mouseleave事件，鼠标指针离开元素上，弹出弹出层</p>
<p class="three">mousedown事件，在元素上按下鼠标，弹出弹出层</p>
<p class="four">mouseup事件，在元素上松开鼠标，弹出弹出层</p>
</div>
</body>
</html>
hover()方法
hover() 方法用于在鼠标指针悬停在被选元素上时要运行的两个函数。即 mouseenter() 和 mouseleave() 方法。
示例：
hover() 中第一个函数在鼠标进入 HTML 元素时执行，第二个函数在鼠标离开 HTML 元素时执行：
$(function(){
$("p").hover(
function(){
console.log("鼠标进入HTML元素，执行第一个函数!");
},
function(){
console.log("鼠标离开HTML元素，执行第二个函数!");
}
);
});
上述代码相当于：
$("p").mouseenter(function(){
console.log("鼠标进入HTML元素，执行第一个函数!");
}).mouseleave(function(){
console.log("鼠标离开HTML元素，执行第二个函数!");
});
我们可以在浏览器中看一下演示效果：
[图片上传失败...(image-d20ecc-1629816251788)]
focus()和blur()方法
当表单元素获得焦点时，也可以说是通过鼠标点击选中元素或通过 tab 键定位到元素时，会发生 focus 事件。可以通过 focus() 方法来触发 focus 事件。
focus() 方法通常与 blur() 方法一起使用，当表单元素失去焦点时发生 blur 事件。 blur 事件是通过 blur() 来触发的。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("input").focus(function(){
console.log("元素获得焦点");
});
$("input").blur(function(){
console.log("元素失去焦点");
});
});
</script>
</head>
<body>
<div>
用户名：<input type="text">
</div>
</body>
</html>
在浏览器中的演示效果：
网友评论