jQuery事件

1. 事件注册

• 单个事件的注册：element.事件(function () { ... } )

$(“div”).click(function () { … })
其他事件和原生 js 基本一致。比如 mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等。

• 使用 on() 方法在匹配元素上绑定一个或多个事件的事件处理程序。
  语法：element.on(events, [selector], fn);

events: 一个或多个用空格分隔的事件。
selector: 将要传递给事件处理函数的数据映射，元素的子元素选择器，其实是触发事件的元素。
fn: 回调函数（即绑定在元素身上的监听函数）。

• 使用 on() 方法注册事件的优势：

// 优势1：可以绑定多个事件和多个事件处理程序。
$("div").on({
	mouseover:function(){ ... },
	mouseout:function(){ ... },
	click:function(){ ... }
});
// 如果处理程序相同则可以不适用对象的形式传参
$("div").on("mouseover mouseout",function() {
	$(this).toggleClass("current");
});
// 优势2：可以直接实现事件委派（将子元素触发的事件绑定在父元素身上）
$("ul").on("click","li",function() {
	console.log(this); // 返回的是触发事件的 li 而不是 ul(与原生不一样)
})
/* 优势3:动态创建的元素，on() 可以提前给它绑定事件。即还没有创建该元素时就可以给它注册相应的事件。（其实原理同第二个优势，因为实质是给ul注册了事件，不过由li 触发的）,也因此这里 on() 的第二个参数必须传递。*/
var i = 0;
var li = null;
// 在 li 创建之前就绑定的事件
$("ul").on('click', 'li', function() {
    console.log($(this).text());
});
// 在点击按钮后才创建 li
$("button").on("click", function() {
    i++;
    li = $("<li>后来创建的第" + i + "个li</li>");
    $("ul").append(li);
})

2. 事件解绑

off() 方法可以移除通过 on() 方法添加的事件处理程序。

$(“div”).off(); // 解绑 div 元素所有事件处理程序。
$(“div”).off(“click”); // 解绑 div 元素上的点击事件。
$(“div”).off(“click”，“span”); // 解绑事件委托。

3. 自动触发事件

有些事件希望能够自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动促发右侧按钮事件实现。

// 第一种形式
$("div").click();
// 第二种形式
$("span").on("click",function(){
	console.log("hi~");
});
$("span").trigger("click");
// 第三种形式,该方法不会触发元素事件的默认行为。
$("span").triggerHandler("click"); 

4. 一次性事件

one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。当使用 one() 方法时，每个元素只能运行一次事件处理器函数。

5. 事件切换

• hover([over, ] out)

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件。
over: 鼠标移到元素上要促发的函数（相当于 mouseenter）。
out: 鼠标移出元素时要促发的函数（相当于 mouseleave）。
如果只写一个函数，则鼠标经过和离开都会触发它。

6. 事件对象

跟元素 js 一样，事件促发就会有事件对象产生。

element.on(events, [selector], function (event) { … })
阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡：event.stopPropagation()