JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。
1、jQuery事件的发展
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
1.1简单事件绑定
click(handler) 单击事件 mouseenter(handler) 鼠标进入事件 mouseleave(handler) 鼠标离开事件 scroll(handler) 滚动事件
缺点：一次只能绑定一个事件
1.2bind事件绑定
//绑定多个事件
//第一个参数：事件类型
//第二个参数：事件处理程序
$("p").bind("click mouseenter",function(){
//事件响应方法
});缺点：不支持动态创建出来的元素绑定事件。（不推荐使用，jq1.7版本后被on取代）
1.3delegate事件绑定
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p","click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});支持动态绑定事件，原因是事件冒泡机制。因为事件时绑定到父元素上的，由子元素触发。
1.4on事件绑定
jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
2、on事件
优势：最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);
例子：
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on("click",“span”, function() {});
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定（不使用代理）。
$(selector).on("click", function() {});3、事件解绑
3.1unbind方法（不推荐使用）
$(selector).unbind(); //解绑所有的事件 $(selector).unbind(“click”); //解绑指定的事件
3.2undelegate方法（不推荐使用）
$( selector ).undelegate(); //解绑所有的delegate事件 $( selector).undelegate( “click” ); //解绑所有的click事件
3.3off方法（推荐使用）
// 解绑匹配元素的所有事件 $(selector).off(); // 解绑匹配元素的所有 click事件$(selector).off(“click”); // 解绑所有代理的click事件，元素本身的事件不会被解绑 $(selector).off( “click”, “**” );
4、事件触发
4.1简单事件触发
$(selector).click(); //触发click事件
4.2trigger方法
$(selector).trigger(“click”);
triggerHandler触发事件响应方法，不触发浏览器行为
列举一些jQuery事件对象
对象属性 | 解释 |
event.type | 事件类型 |
event.data | 存储绑定事件时传递的附加数据 |
event.target | 点了谁就是谁 |
event.currentTarget | 当前DOM元素，等同于this |
event.delegateTarget | 代理对象 |
screenX和screenY | 对应屏幕最左上角的值 |
offsetX和offsetY | 点击的位置距离元素的左上角的位置 |
clientX和clientY | 距离页面左上角的位置（忽视滚动条） |
pageX和pageY | 距离页面最顶部的左上角的位置（会计算滚动条的距离） |
event.witch | 鼠标按键类型，1=鼠标左键 2=鼠标中键3=鼠标右键 |
event.keyCode | 按下的键盘代码 |
event.stopPropagation() | 阻止事件冒泡行为 |
event.preventDefault() | 阻止浏览器默认行为 |
return false; | 阻止后续行为 |
5、jQuery插件机制
5.1第三方插件
jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。
例如：animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。
如何使用第三方插件：
1、引入jQuery文件
2、引入插件
3、使用插件
5.2制作插件
jQuery对象扩展方法
$.fn. pluginName = function() {};5.3jQuery UI
jQueryUI专指由jQuery官方维护的UI方向的插件。
官方API：http://api.jqueryui.com/category/all/
其他教程：jQueryUI教程
基本使用:
1、引入jQueryUI的样式文件
2、引入jQuery
3、引入jQueryUI的js文件
4、使用jQueryUI功能
更多jQuery操作可以查件官方文档：https://api.jquery.com/
