当前位置：jQuery中的事件注册方式
2018/11/14 17:45 分类： 技术交流 浏览：34
今天给大家介绍一下jQuery中的的事件注册（添加）方式。
jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。
一、jQuery事件注册方式
jQuery的事件发展历史如下：
简单事件绑定-->bind事件绑定-->delegate事件绑定-->on事件绑定(推荐)
1.1 简单事件绑定：
语法比较简单：
$(selector).click(hander); //hander表示事件处理函数。
$(selector).mouseover(hander);
$(selector).mouseout(hander);
这种方式的缺点是：不能同时添加多个事件。
1.2 bind方式添加事件：
//第一个参数：事件类型
//第二个参数：事件处理程序
$(selector).bind("click mouseout", function(){
//事件处理方法
});
也可以这样写：
$(selector).bind(
{
"click": function(){
//事件处理方法
},
“mouseout”:function(){
//事件处理方法
}
}
);
这种方法的缺点是：不支持动态事件绑定 。
1.3 delegate注册委托事件
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$("父元素").delegate("div", "click", function(){
//为父元素下面的所有的div标签绑定事件
});
这种方式是把事件注册给父元素的，执行的是子元素。（支持动态事件绑定）
1.4 on注册事件
前面的事件注册方式太多了，从jQuery1.7之后，就使用用on统一了所有事件的处理方法。
1.4.1 注册简事件
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。$(selector).on( "click", function() {});
1.4.2 on注册委托事件
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click", ”span” , function() {});
1.5 on注册事件的完整语法：
$(selector).on(events[,selector][,data],handler);
第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
第四个参数：handler，事件处理函数
二、小结：
以上的事件注册方式，大家只要重点掌握on 方法即可，前面的几种方式了解即可。
感谢源码时代教学讲师提供此文章！
本文为原创文章，转载请注明出处！
赞 0
