jQuery事件函数：事件处理、事件委派、事件切换、事件学习笔记

1、事件处理

on(eve,[sel],[data],fn)，在选择元素上绑定一个或多个事件的事件处理函数。同一元素可以绑定多个相同的事件。

// 点击p弹出警告框显示p内容
$("p").on("click", function(){
	alert( $(this).text() );
});

// 传递参数，点击显示文本
$("p").on("click", {
    foo: "bar"
}, function (event) {
    alert(event.data.foo);
})

off(eve,[sel],[fn])，在选择元素上移除一个或多个事件的事件处理函数。移除on绑定的事件
```
$("p").off("mouseover mouseout"); //移除多个用空格
```
bind(type,[data],fn)，为每个匹配元素的特定事件绑定事件处理函数。
one(type,[data],fn)，为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
trigger(type,[data])，在每一个匹配的元素上触发某类事件。自定义事件使用。
triggerHandler(type, [data])，触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。
unbind(t,[d|f])，bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

JS里on()和bind()两种方法的区别。

1、bind有三个参数，分别是event，data，function，也就是事件，额外要添加的数据以及执行函数。on有四个参数，分别是event，selector，data，function，分别是事件，选择器，额外添加的数据和执行函数。

2、on可以指定具体的子元素，bind不可以

3、on可以绑定没有页面渲染时不存在的dom，bind不可以

4、on是jquery推荐使用的，bind是从某个版本开始就不推荐使用的

2、事件委派

delegate(s,[t],[d],fn)，指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

// HTML 代码:
 <div style="background-color:red">
    <p>这是一个段落。</p>
    <button>请点击这里</button>
 </div>
// jQuery 代码:当点击、移除、移除div里面的button的时候，会触发事件处理函数显示或隐藏p
$("div").delegate("button", "click mouseover mouseout", function () {
    $("p").slideToggle();
});

undelegate([s,[t],fn])，删除由 delegate() 方法添加的一个或多个事件处理程序。
```
// 多个事件用空格隔开
$("div").undelegate("mouseover mouseout");
```

3、事件切换

hover([over,]out) 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

// html 鼠标移入改变颜色
<div id="div1" style="width:100px;height:100px;border: 1px solid black;"></div>
// jQuery 代码:
$("#div1").hover(function () {
    $(this).css("background", "black")
}, function () {
    $(this).css("background", "white")
})

4、事件

blur([[data],fn])，当元素失去焦点时触发 blur 事件。
change([[data],fn])，当元素的值发生改变时，会发生 change 事件。该事件仅适用于文本域，以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。
click([[data],fn])，鼠标单击事件。
dblclick([[data],fn])，鼠标双击事件。
error([[data],fn])，当元素遇到错误（没有正确载入）时，发生 error 事件。
focus([[data],fn])，当元素获得焦点时，触发 focus 事件。
focusin([data],fn)，当元素获得焦点时，触发 focusin 事件。focusin事件跟focus事件区别在于，focusin可以在父元素上检测子元素获取焦点的情况。
focusout([data],fn)，当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于，focusout可以在父元素上检测子元素失去焦点的情况。
keydown([[data],fn])，当键盘或按钮被按下时，发生 keydown 事件。
keypress([[data],fn])，当键盘或按钮被按下时，发生 keypress 事件。
keyup([[data],fn])，当按钮被松开时，发生 keyup 事件。
mousedown([[data],fn])，当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mouseenter([[data],fn])，当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
mouseleave([[data],fn])，当鼠标指针离开元素时，会发生 mouseleave 事件。
mousemove([[data],fn])，当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
mouseout([[data],fn])，当鼠标指针从元素上移开时，发生 mouseout 事件。
mouseover([[data],fn])，当鼠标指针位于元素上方时，会发生 mouseover 事件。
mouseup([[data],fn])，当在元素上放松鼠标按钮时，会发生 mouseup 事件。
resize([[data],fn])，当调整浏览器窗口的大小时，发生 resize 事件。
scroll([[data],fn])，当用户滚动指定的元素时，会发生 scroll 事件。
select([[data],fn])，当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
submit([[data],fn])，当提交表单时，会发生 submit 事件。
unload([[data],fn])，在当用户离开页面时，会发生 unload 事件。

与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。