- 1.事件机制
jQuery的事件机制，指的是：jQuery对JavaScript操作DOM事件的封装，包括了：事件绑定、事件解绑、事件触发 - JavaScript：
btn.onclick = function() {}; //给按钮绑定事件
- jQuery：
$btn.click(function() {}); //给按钮绑定事件
click是一个方法，内部是对onclick事件的封装
- 2.简单的事件
click() 单击事件
blur() 失去焦点事件
mouseenter() 鼠标进入事件
mouseleave() 鼠标离开事件
dblclick() 双击事件
change() 改变事件，如：文本框值改变，下拉列表值改变等
focus() 获得焦点事件
keydown() 键盘按下事件
mouseover冒泡，mouseenter不冒泡
其他参考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp - 3.事件绑定
- bind()方式
作用：给匹配到的元素直接绑定事件（不推荐，1.7以后的jQuery版本被on取代）
// 绑定单击事件处理程序
第一个参数：事件类型
第二个参数：事件处理程序
$("p").bind("click mouseenter", function(){
//事件响应方法
});
- delegate()方式
优势：减少事件绑定次数提高效率，支持动态创建出来的元素绑定事件
// 第一个参数：div，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$("div").delegate("p", "click", function(){
//为 div下面的所有的p标签绑定click事件
});
- on()方式（最现代的方式，强烈建议使用的方式）
1
绑定单个事件
$('p').on('click',function () {
console.log('xxx');
})
2
绑定多个事件 -> 同一个回调函数
$('p').on('click mouseenter ',function (event) {
console.log('xxx' + event.type);
})
3
绑定多个事件 -> 多个回调函数(键值对)
键: 事件类型
值: 需要执行的函数
$('p').on({
'click': cE,
'mouseenter': function () {
console.log('鼠标移入');
}
})
function cE() {
console.log('单机事件');
}
4
//为 div下面的所有的span标签绑定click事件
$("div").on( "click",“span”, function() {});
- 4.事件解绑
- unbind() 方式
$("div").unbind(); //解绑所有的事件
$("div").unbind(“click”); //解绑指定的事件
- undelegate() 方式
$("div").undelegate(); //解绑所有的delegate事件
$("div").undelegate( “click” ); //解绑所有的click事件
- off解绑on方式绑定的事件
// 解绑匹配元素的所有事件
$("div").off();
// 解绑匹配元素的所有click事件
$("div").off(“click”);
// 解绑所有代理的click事件，元素本身的事件不会被解绑
$("div").off( “click”, “**” );
事例
$('p').click(function () {
console.log('xxxx');
$('p').off('click');
})
- 5.自动触发事件
trigger()方法触发事件
会触发事件的默认行为.
$(':submit').trigger('click');
triggerHandler()方法触发事件
不会触发事件的默认行为.
$(':submit').triggerHandler('click');
