一、基础事件
1、绑定事件
bind();
参数一：要绑定事件函数的事件名。
参数二：要绑定的事件函数（事件函数名），如果将来有可能删除该绑定的函数，则必须传函数名。
bind()方法可以通过链式调用的形式连续多次调用，进而个同一标签的同一事件（不同事件）添加不同的事件函数。
on('事件名',fn);
one('事件名',fn);该方法绑定的事件函数只能被触发一次。
2、解除事件
unbind();
参数一：要解绑事件函数的事件名（如果只传这一个参数，则该事件名中绑定的函数全部解除）。
参数二：要解除绑定的事件函数名。
off();
注意：bind()和unbind()在3.0后已经被on()和off()取代。
$('button').bind('click',hello);
$('button').unbind('click',hello);
3.0后提倡的方法：on off
$('button').on('click',hello).on('click',bye);
解除事件绑定，解除很多方法都可以用这个方法
$('button').off('click');
one()方法绑定的事件函数只能被触发一次
$('button').one('click',hello);
$('button').off('click');
3、简写事件
事件简写本质就是简化给标签添加事件函数的操作，标准的添加事件方法：on/bind/one,类似于js的DOM2级添加事件函数操作；事件简写类似于DOM0级的事件绑定操作。
jq事件简写绑定事件函数的技术实现原理：
1、jq给每一个事件名定义了同名的函数，用户调用的事件简写形式，就是在调用这个和事件名同名的函数
2、同名函数内部实现原理：当用户调用了该函数，首先获取该函数的函数名（函数名代表的是事件名），在函数内部通过on把通过参数传进来的函数绑定在函数名对应的事件上。
blur(fn)：失去焦点时触发该方法。
focus(fn)：当鼠标或tab按钮让元素获得焦点时，触发该函数。
change(fn)：表单元素失去焦点（单选框、复选框、下拉菜单标签被选中即可触发，不需等待失去焦点），触发该事件。
click(fn)：鼠标点击时触发该事件。
dbclick(fn)：双击元素时触发该事件（注意：把click和dbclick用于同一个元素会产生问题）。
$(window).scroll(fn)：当页面滚动时触发事件。
function hello(){
alert('hello');
}
$('button').click(hello);
$('button').click(function(){
alert('bye')
});
$('button').off('click');
4、复合事件
hover(fn1,fn2):鼠标移入触发fn1函数，鼠标移出触发fn2函数。
$('div').hover(function(){
$(this).css('background','red')
},function(){
$(this).css('background','green')
});
复合事件：toggle().在1.8之前中，复合了奇、偶次点击事件，在1.9之后的版本中toggle方法用于jq的动画
toggle（）方法在1.8之前的版本中需要两个函数类型作为参数，奇数次点击触发第一个函数，偶数次店家触发第二个函数。
$('#div').toggle(function(){
$(this).css('background','red')
},function(){
$(this).css('background','green')
});
二、事件对象
事件对象的获取：在事件触发的函数中传递event参数。
事件对象的常用属性：
event.type:事件类型
event.target:触发事件的元素
e.currentTarget:事件绑定在哪个元素上
event.pageX:鼠标相对于文档的左侧坐标
event.pageY:鼠标相对于文档的顶部坐标
e.preventDefault():取消标签事件，如a标签的页面跳转。
e.stopPropagation():阻止事件冒泡
$('#div').click(function(event) {
// 通过jq获取到的事件对象和js获取到的事件对象所具备的属性基本一致。
console.log(event);
// 在jq事件体系中target属性保存的是触发该事件的标签；currentTarget属性保存的是响应（触发了事件函数）的标签
console.log(event.target);
console.log(event.currentTarget);
// 在js事件体系中，target属性保存的是触发该事件的标签，currentTarget属性永远为null
});
事件的冒泡以及默认行为的处理
1、阻止事件冒泡
stopPropagation()方法
2、阻止默认行为
preventDefault()方法
注意：1、return false 在jQuery中是即阻止事件冒泡又阻止默认行为
2、jQuery不支持事件捕获
jQuery高级事件
window.onload = function () {
/*
var btnArr = document.querySelectorAll('.btn');
for (var i = 0; i < btnArr.length; i ++) {
btnArr[i].num = i+1;
btnArr[i].onclick = function () {
alert('这是第' + this.num + '个按钮');
}
}
*/
/*
var btnArr = document.querySelectorAll('.btn');
for (var i = 0; i < btnArr.length; i++) {
// var count = i + 1
btnArr[i].id = i+1;
}
// 使用Js事件委托实现功能
var divTag = document.querySelector('#div');
divTag.onclick = function (ev) {
var e = event || ev;
// console.log(e.target.id);
alert('当前是第' + e.target.id + '个按钮')
}
*/
// $('.btn').each(function(index, el) {
// this.id = index + 1;
// });
// 通过jq实现事件委托
/*
$('#div').click(function(event) {
alert('当前触发的是第' + event.target.id + '个按钮')
});
*/
/*
$('#div').on('click', function (event) {
// index()该方法是jq体系中的方法，通过该方法可以获取到调用者在
他的兄弟标签中的下标
var count = $(event.target).index() + 1;
alert('当前选择的是第' + count + '个按钮');
});
*/
// on()方法中的第二个参数可以传递选择器
// 在事件委托中，通过父标签响应子标签的事件时，只有被选择器匹配的
标签触发的事件，才能触发执行父标签的事件函数；如果触发事件的子标签并没
有被选择器匹配，则父标签的事件函数不会执行。
$('#div').on('click', '.btn', function(event) {
alert('当前是第' + $(event.target).index()+'个按钮');
})
}
解密jQuery事件核心：http://www.cnblogs.com/aaronjs/p/3444874.html
网友评论