JQuery系列（2） - 事件处理
JQuery事件绑定
（1）on方法
on方法是jQuery事件绑定的统一接口。后面介绍的事件绑定的那些简便方法，其实都是on方法的简写形式。
$('li').on('click', function (e){
console.log($(this).text());
});
on方法接受两个参数，第一个是事件名称，第二个是回调函数。
注意，在回调函数内部，this关键字指的是发生该事件的DOM对象。为了使用jQuery提供的方法，必须将DOM对象转为jQuery对象，因此写成$(this)。
on方法允许一次为多个事件指定同样的回调函数。
$('input[type="text"]').on('focus blur', function (){
console.log('focus or blur');
});
on方法还可以为当前元素的某一个子元素，添加回调函数。
$('ul').on('click', 'li', function (e){
console.log(this);
});
子元素事件冒泡触发父元素事件，关于on方法的详细介绍：http://www.365mini.com/page/jquery-on.htm
on方法还允许向回调函数传入数据。
$("ul" ).on("click", {name: "张三"}, function (event){
console.log(event.data.name);
});
当回调函数被触发后，它们的参数通常是一个事件对象event。
$(document).on('click', function (e){
// ...
});
上面代码的回调函数的参数e，就代表事件对象event。
event对象有以下属性：
- type：事件类型，比如click。
- which：触发该事件的鼠标按钮或键盘的键。
- target：事件发生的初始对象。
- data：传入事件对象的数据。
- pageX：事件发生时，鼠标位置的水平坐标（相对于页面左上角）。
- pageY：事件发生时，鼠标位置的垂直坐标（相对于页面左上角）。
event对象有以下方法：
- preventDefault：取消浏览器默认行为。
- stopPropagation：阻止事件向上层元素传播。
（2）one（）方法
one方法指定一次性的回调函数，即这个函数只能运行一次。这对提交表单很有用。
$("#button").one( "click", function() { return false; } );
one方法本质上是回调函数运行一次，即解除对事件的监听。
document.getElementById("#button").addEventListener("click", handler);
function handler(e) {
e.target.removeEventListener(e.type, arguments.callee);
return false;
}
（3）绑定事件的简便方法
- click
- keydown
- keypress
- keyup
- mouseover
- mouseout
- mouseenter
- mouseleave
- scroll
- focus
- blur
- resize
- hover
$('li').click(function (e){
console.log($(this).text());
});
JQuery事件触发和移除
（1）trigger（）事件触发方法
trigger方法用于触发回调函数，它的参数就是事件的名称。
$('li').trigger('click')
上面代码触发li元素的click事件回调函数。与那些简便方法一样，trigger方法只触发回调函数，而不会引发浏览器的默认行为。
（2）简单版事件触发方法
$('li').click()
$('li').keydown()
下面是一个捕捉用户按下escape键的函数
$(document).keyup(function(e) { if (e.keyCode == 27) { $('body').toggleClass('show-nav'); // $('body').removeClass('show-nav'); } });
（3）off方法，事件方法移除
off方法用于移除事件的回调函数。
$('li').off('click')
上面代码移除li元素所有的click事件回调函数。
参考
【1】阮一峰， http://javascript.ruanyifeng.com/jquery/basic.html#toc4
