jQuery封装了大量的javascript事件，方便了开发人员的使用。这样规范了代码，使得我们的日常开发变得简单而方便，我们只需要了解其基本的操作方法以及实现原理，下面我来给大家介绍一下jQuery的事件是如何使用。
在jQuery中的事件，我简单分为以下几种类型：
●事件绑定与取消
√ on() - 规定向被选元素添加的一个或多个事件处理程序。
// 给按钮绑定事件
// 可以通过群组选择器选出多个元素，并且可以同时添加事件
// 可以同时给元素绑定多个事件，只需要在on()的第一个参数的位置添加事件类型，中间使用空格分隔，即可
$('#btn1, #btn2').on('click mouseover mouseout', function (e) {
// 使用on()方式绑定的事件的回调中，内部的this为触发该方法的原生DOM对象。
// 如果需要使用，建议转为JQ元素，后续使用JQ方法
var $this = $(this);
$this.html('button');
// 每次函数被调用，都会产生一个事件对象，就是函数的参数e，并且JQ已经出了兼容的问题
// 通过e.type就可以获取事件类型
console.log(e.type);
console.log(e);
});
还有一点需要注意的是：如果给一个人按钮绑定多个事件的时候，可以给on（）方法传递一个对象，方法类型和对应的函数以健值的方式传入
$('#btn1').on({
'click': function () {
console.log('click');
},
'mouseover': function () {
console.log('mouseover');
}
});
我们会觉得这样给元素绑定事件在书写方面有点麻烦，而且代码量也不少，所以我们有更为简洁的写法来进行事件的绑定，代码如下：
$('#btn1').click(function () {
console.log('click');
});
$('#btn2').mouseout(function () {
console.log('dblclick');
});
√ off() - 移除指定元素添加的一个或多个事件处理程序。
$('#btn1, #btn2').off('mouseover mouseout');
√ one() - 为被选元素附加一个只执行一次的事件处理程序。
$('#btn3').one('click', function () {
console.log(this);
});
√ load() - 当指定的元素（及子元素）已加载时，会发生 load() 事件。
通常我们在写js代码时候会在js代码外面加一个这样的函数（表示将页面的文档加载完之后再执行）
$(document).ready(function(){
}); //或者还有另外一种简洁的写法
$(function () {
});
√ hover() -复合事件，同时可绑定多个事件，相当于mouseover和mouseout。
$('li').hover(function(){
$(this).css('background-color','blue');
},function(){
$(this).css('background-color','block');
});
●元素状态的变化
blur() - 当元素失去焦点时发生 blur 事件。
change() - 当元素的值发生改变时，会发生 change 事件。
click() - 当点击元素时，会发生 click 事件。
dblclick() - 当双击元素时，会发生 dblclick 事件。
focus() - 当元素获得焦点时，发生 focus 事件。
●元素外部状态
resize() - 当调整浏览器窗口的大小时，发生 resize 事件。
scroll() - 当用户滚动指定的元素时，会发生 scroll 事件。
select() - 文本被选择时，会发生 select 事件。
submit() - 当提交表单时，会发生 submit 事件。
特殊状态触发
error() - 当元素遇到错误（没有正确载入）时，发生 error 事件。
trigger() - 触发被选元素的指定事件类型。
triggerHandler() - 触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。
●鼠标键盘事件
keydown() - 当按钮被按下时，发生 keydown 事件。
keypress() - keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。
keyup() - 当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
mousedown() - 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mouseenter() - 当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseleave() - 当鼠标指针离开元素时，会发生 mouseleave 事件。
mousemove() - 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
mouseout() - 当鼠标指针从元素上移开时，发生 mouseout 事件。
mouseover() - 当鼠标指针位于元素上方时，会发生 mouseover 事件。
mouseup() - 当在元素上放松鼠标按钮时，会发生 mouseup 事件。
●介绍完jQuery的一些常用时间后，我们来看一下jQuery的i事件对象
√ 事件对象的获取
$('div').click(function(event){ //触发的函数中的参数，即为事件对象
console.log(event)
});
√ 事件对象的常用属性
currentTarget 实际触发事件的对象
delegateTarget 代理对象
pageX 相对于文档的X值
pageY 相对于文档的Y值
type 触发方式
target 触发事件的对象
√ 事件的冒泡以及默认行为的处理
stopPropagation（）； 阻止事件冒泡
preventDefault（）； 组织默认的事件
●接下来介绍一下jQuery的高级事件，也就是事件委托，下面我以一个小案例来为大家介绍
首先在页面中写出以下html代码
设置简单的样式
我们要实现的效果是当你任意点击一个li时，会在ul的最下方复制出一个你点击的li
如果用原生js的写法来实现的话，代码如下：
/ 获取所有li
var lis = document.querySelectorAll('li');
var click = function () {
// 创建新li
var newLi = document.createElement('li');
newLi.innerHTML = this.innerHTML;
newLi.onclick = click;
// 拼接
document.querySelector('ul').appendChild(newLi);
};
// 给所有li绑定事件
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = click;
}
接下来我引入jQuery，使用jq来进行实现效果，代码如下：
$('ul').on('click', 'li', function () {
// 使用on()的方式可以快速的添加事件代理（委托）
// 把事件绑定到父元素上面，on()第一个参数为事件类型，第二个参数为实际触发的对象，第三个参数为回调函数
// 先将this转为JQ元素，然后克隆，然后拼接到ul最后面
$(this).clone().appendTo('ul');
});
jq的事件先介绍到这里，如果对您有所帮助的话，请点赞并关注哦，我会不定时的更新一下自己学习的经验以及见解，和大家进行交流。
您赞就是是我最大的动力！！！