jQuery中的事件机制

孙肖宁

May 13, 2018

6586 views

No comments

2433 words

编程语言

jQuery的事件机制，指的是：jQuery对JavaScript操作DOM事件的封装，包括了：事件绑定、事件解绑、事件触发。

事件绑定

简单事件绑定
click(handler) 单击事件;
blur(handler) 失去焦点事件;
mouseenter(handler) 鼠标进入事件;
mouseleave(handler) 鼠标离开事件;
dbclick(handler) 双击事件;
change(handler) 改变事件，如：文本框值改变，下来列表值改变等;
focus(handler) 获得焦点事件;
keydown(handler) 键盘按下事件;
......
bind方式（1.7版本以后的jQuery版本被on取代）
作用：给匹配到的元素直接绑定事件。
第一个参数：事件类型
第二个参数：事件处理程序
```
$("p").bind("click mouseenter", function(e){
  //事件响应方法
});
```
优缺点：
- 可以同时绑定多个事件，比如：bind(“mouseenter mouseleave”, function(){})
- 缺点：要绑定事件的元素必须存在文档中。
delegate方式（特点：性能高，支持动态创建的元素）
作用：给匹配到的元素绑定事件，对支持动态创建的元素有效
第一个参数：selector，要绑定事件的元素
第二个参数：事件类型
第三个参数：事件处理函数
```
$(".parentBox").delegate("p", "click", function(){
  //为 .parentBox下面的所有的p标签绑定事件
});
```
优势：减少事件绑定次数提高效率，支持动态创建出来的元素绑定事件！
on方式（最现代的方式，兼容zepto(移动端类似jQuery的一个库)）
jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法
作用：给匹配的元素绑定事件，包括了上面所有绑定事件方式的优点
语法：
第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
第二个参数：selector, 执行事件的后代元素
第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用
第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);
表示给$(selector)绑定事件，当必须是它的内部元素span才能执行这个事件
$(selector).on( "click",“span”, function() {});
- 绑定多个事件
表示给$(selector)匹配的元素绑定单击和鼠标进入事件
$(selector).on(“click mouseenter”, function(){});

事件解绑

unbind() 方式
作用：解绑 bind方式绑定的事件
$(selector).unbind(); //解绑所有的事件
$(selector).unbind(“click”); //解绑指定的事件
undelegate() 方式
作用：解绑delegate方式绑定的事件
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件
off解绑on方式绑定的事件
$(selector).off();// 解绑匹配元素的所有事件;
$(selector).off("click");// 解绑匹配元素的所有click事件;
$(selector).off( "click", "**" ); // 解绑所有代理的click事件，元素本身的事件不会被解绑。

事件触发

简单事件触发
$(selector).click(); //触发 click事件
trigger方法触发事件，触发浏览器行为
$(selector).trigger(“click”);
triggerHandler触发事件响应方法，不触发浏览器行为
比如:文本框获得焦点的默认行为 $(selector).triggerHandler(“focus”);