JS虽然提供了事件操作机制，但由于浏览器处理事件的差异，在编写JS程序时需要充分考虑到浏览器的兼容性，编写的代码过于复杂和臃肿，不利于程序的维护，降低了编程效率。
1、 jQuery封装的事件
jQuery对JS的事件进行了封装，编写JS程序时不必再考虑浏览器的兼容性。jQuery库封装了JS常用事件，以方便开发者很便捷地绑定这些事件。
jQuery封装的常用事件如下表所示：
注释（1）
ready(fn)是jQuery最重要的事件处理函数，它在网页内的DOM元素全部加载完成后触发，它完全可以替代Window对象的load事件，通过使用这个方法,可以在DOM载入就绪时，立即执行DOM元素绑定的函数，并且大多数JavaScript函数都需要在这个方法内执行，参数fn是ready事件的处理函数。
该事件处理函数的写法如下：
$(document).ready(function(e) {
// JS代码……
});参数e是一个事件对象，通过e可以获取事件的属性，或者执行事件的特点方法。在事件处理函数中，若不需要使用e这个事件对象，可以忽略该参数。下面的代码也是正确的：
$(document).ready(function() {
// JS代码……
});注释（2）
hover([fn1,]fn2)事件用于处理鼠标移入和移出元素区域触发的事件，该事件有两个处理函数fn1和fn2，fn1对应鼠标移入事件，fn2对应鼠标移出事件，fn1是必需的，fn2是可选的。
例如：
$("p").hover(function(){
$("p").css("background-color","yellow");
},
function(){
$("p").css("background-color","pink");
});上面的代码用于处理p元素的haver事件，该事件有两个处理函数：鼠标移入处理，当鼠标进入p元素区域时，将p元素区域的背景色设为yellow；鼠标移出处理，当鼠标离开p元素区域时，将p元素区域的背景色设为pink。
2、 绑定事件
jQuery封装了事件，简化了事件的绑定的和处理。jQuery绑定事件也非常方便，它提供了一些绑定事件的简单方式，如前面多次使用的$("#btn").click()绑定方式。
此外，jQuery还提供了bind 方法，专门用于事件的绑定，语法如下：
$(selector).bind(event,data,function)
参数event是jQuery事件名称，前面表中列出的事件都可以传入，类型是字符串。例如表中的事件是click(fn)，对应的事件名称为click。
可选参数data是事件的附加数据，触发事件时可以传入一些与事件相关的附加数据。
参数function是绑定事件的处理函数。
案例代码8（案例代码见unit4\case10.html）：
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="script/jquery-3.5.1.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#id_get").bind("click",function(){
// 获取div子元素p样式属性font-size值
alert($("div p").css("font-size"))
});
$("#id_set").bind("click",function(){
// 设置div子元素p样式属性color值
$("div p").css("color","#ff00cc")
});
});
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<div id = "id_content">
<p style="font-size:22px;">我们家的后园有半亩空地。</p>
</div>
<p><input type="button" id="id_get" value="样式属性取值"/>
<input type="button" id="id_set" value="样式属性赋值"/></p>
</body>
<html>3、 事件对象
当一个事件被触发时，绑定的事件处理函数有时需要获取该事件的一些信息，以便对事件做进一步处理。例如：绑定click事件的处理函数，可能需要获取鼠标的位置信息，这时就需要使用事件对象。
事件对象可以在事件处理函数中作为参数传入，jQuery会自动传入对象的事件对象。
案例代码9（案例代码见unit4\case11.html）：
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="script/jquery-3.5.1.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function() {
// 参数e为click事件的事件对象
$("#id_point").bind("click",function(e){
// pageX是鼠标相对于页面原点的水平坐标
x = e.pageX
// pageX是鼠标相对于页面原点的垂直坐标
y = e.pageY
$("#text_count").html("x:" + x + "," + "y:" + y)
});
});
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<p><span id="text_count"></span></p>
<input type="button" id="id_point" value="获取鼠标位置"/></p>
</body>
<html>在案例代码中，处理click事件的函数声明了参数e，e就是事件对象，事件触发后jQuery会自动传入与click事件对应的事件对象。因为click是鼠标事件，因此传入的是鼠标事件对象，该对象的属性pageX和pageY分别为鼠标相对于页面的水平坐标和垂直坐标。
事件对象常用属性如下表所示：
事件对象常用方法如下表所示：
案例代码10（案例代码见unit4\case12.html）：
<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="script/jquery-3.5.1.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function(e) {
// 参数e为click事件的事件对象
$("#id_attri").bind("click",function(e){
// pageX是鼠标相对于页面原点的水平坐标
x = e.pageX
// pageX是鼠标相对于页面原点的垂直坐标
y = e.pageY
var info = "<p>鼠标位置 x:" + x + "," + "y:" + y + "</p>"
info += "<p>事件类型：" + e.type + "</p>"
info += "<p>触发事件的对象：" + e.target + "</p>"
info += "<p>鼠标按键号：" + e.which + "</p>"
$("#text_count").html(info)
});
// 绑定input元素键盘事件
$("#id_text").bind("keydown",function(e){
alert(e.keyCode);
});
});
</script>
</head>
<body>
<h3>JavaScript开发案例</h3>
<p><span id="text_count"></span></p>
<input type="text" id="id_text" value=""/></p>
<input type="button" id="id_attri" value="输出事件对象属性"/></p>
</body>
<html>4、 移除事件绑定
若需要移除绑定的事件，可以使用unbind()方法，该方法会从指定的元素上删除一个或多个事件处理程序。其语法如下：
$(selector).unbind(event,function)
可选参数event是解除绑定的事件名称，可选参数function为解除绑定后的处理函数。若没有提供event参数，该方法将移除selector选取元素的所有事件处理程序。