第5章 jQuery之事件
2016-03-07 22:38
686 查看
我们可以使用jQuery为页面上的元素动态的绑定一个事件,也可以动态的解绑一个事件
5.1 动态绑定与动态解绑
第1组
bind (绑定,不具有事件委托)//使用.bind()不具备动态绑定功能,只有点击原始按钮才能生成
$('.button').bind('click',function(){
alert(“事件不委托”);
});
注意:bind只能绑定已经存在的元素,对于新生成的元素无法动态绑定(即不具有事件委托)
unbind ( 解绑 )
//使用unbind删除绑定的事件
$('input').unbind(); //删除所有当前元素的事件
//使用unbind参数删除指定类型事件
$('input').unbind('click'); //删除当前元素的click事件
注意:事件委托在下方会讲到
第2组(事件委托)
live (绑定,具有事件委托,但是不支持连缀)//使用.live()具备动态绑定功能,jQuery1.3使用,jQuery1.7之后废弃,jQuery1.9删除
$('.button').live('click',function(){
alert(“事件委托”);
});
注意:
1、使用live绑定的是祖先元素docunent,而非button,所以永远只会绑定一次事件。
2、点击button其实是冒泡到document上的
3、点击document的时候,需要验证事件类型(event.type)和事件目标(event.target)如果 事件类型是click;事件目标是button,则触发
4、.live()方法已经被删除,无法使用了。需要测试使用的话,需要引入向下兼容插件。
5、不支持连缀,如:
die ( 解绑 )
$('.button').die('click');
第3组(事件委托)
delegate (绑定,具有事件委托,支持连缀)参数:
第一个参数是当前元素
第二个参数是事件方式
第三个参数是执行函数
如:
$('div').first().delegate('.button','click', function(){
$(this).clone().appendTo('div:first');
});
说明:
注意:
1、.delegate()需要指定父元素
2、delegate事件其实绑定在父类元素上
undelegate ( 解绑 )
如:$('#box').undelegate('.button','click');
补充
目前绑定事件和解绑的方法有三组共六个。由于这三组的共存可能会造成一定的混乱,为此jQuery1.7以后推出了.on()和.off()方法彻底摒弃前面三组。on替换绑定
替代.bind()方式$('.button').on('click',function(){
alert('替代.bind()');
});
使用额外数据和事件对象
$('.button').on('click',{user:'Lee'}, function(e){
alert('替代.bind()'+e.data.user);
});
绑定多个事件
$('.button').on('mouseovermouseout',function(){
alert('替代.bind()移入移出!');
});
以对象模式绑定多个事件
$('.button').on({
mouseover:function(){
alert('替代.bind()移入!');
},
mouseout:function(){
alert('替代.bind()移出!');
}
});
阻止默认行为并取消冒泡
$('form').on('submit',function(){
return false;
});
或
$('form').on('submit',false);
//替代.bind()方式,阻止默认行为
$('form').on('submit',function(e){
e.preventDefault();
});
//替代.bind()方式,取消冒泡
$('form').on('submit',function(e){
e.stopPropagation();
});
替代.live()和.delegate()
$('#box').on('click','.button', function(){
$(this).clone().appendTo('#box');
});
off替换解绑
替代.unbind()方式$('.button').off('click');
$('.button').off('click',fn);
$('.button').off('click.abc');
替代.die()和.undelegate()
$('#box').off('click','.button');
one
不管是.bind()还是.on(),绑定事件后都不是自动移除事件的,需要通过.unbind()和.off()来手工移除。jQuery提供了.one()方法,绑定元素执行完毕后自动移除事件,可以方法仅触发一次的事件。//类似于.bind()只触发一次
$('.button').one('click',function(){
alert('one仅触发一次!');
});
//类似于.delegate()只触发一次
$('#box).one('click','.button',function(){
alert('one仅触发一次!');
});
复合事件
jQuery提供了许多最常用的事件效果,组合一些功能实现了一些复合事件,比如切换功能、智能加载等hover
$('div').hover(function(){$(this).css('background','black'); //mouseenter效果
},function(){
$(this).css('background','red'); //mouseleave效果,可省略
});
toggle(被1.8版废用)
$('div').toggle(function(){ //第一次点击切换$(this).css('background','black');
},function(){ //第二次点击切换
$(this).css('background','blue');
},function(){ //第三次点击切换
$(this).css('background','red');
});
注意:已经被1.8版废用,可以下载jquery-migrate.js文件,来向下兼容已被删除掉的方法
事件对象(event)
事件对象就是event对象,通过处理函数默认传递接受。//通过处理函数传递事件对象
$('input').bind('click',function(e){ //接受事件对象参数
alert(e);
});
属性
data:获取事件调用时的额外数据//通过event.data获取额外数据,可以是数字、字符串、数组、对象
$('input').bind('click',123,function(){ //传递data数据
alert(e.data); //获取数字数据
});
方法
1、stopPropagation:设置到需要触发的事件上时,所有上层的冒泡行为都将被取消。2、isPropagationStopped:判断是否取消了冒泡行为。
3、preventDefault:禁用默认行为。
4、isDefaultPrevented:判断是否禁用了默认行为。
5、stopImmediatePropagation:取消事件冒泡,并取消该事件的后续事件处理函数
6、isImmediatePropagationStopped:判断是否调用了stopImmediatePropagation()方法
冒泡和默认行为
冒泡
如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出现冒泡问题。例:
<div style="width:200px;height:200px;background:red;">
<input type="button" value="按钮"/>
</div>
$('input').click(function(){
alert('按钮被触发了!');
});
$('div').click(function(){
alert('div层被触发了!');
});
$(document).click(function(){
alert('文档页面被触发了!');
});
效果:
当我们点击文档的时:
只触发文档事件;
当我们点击div层时:
触发了div和文档两个;
当我们点击按钮时:
触发了按钮、div和文档。
总结:
1、冒泡的前提:
A、元素重叠
B、重叠的元素绑定了同一个事件
2、触发的顺序是从小范围到大范围。这就是所谓的冒泡现象,一层一层往上。
阻止冒泡:event.stopPropagation()
这个方法设置到需要触发的事件上时,所有上层的冒泡行为都将被取消。
如:
$('input').click(function(e){
alert('按钮被触发了!');
e.stopPropagation(); // 取消上层的所有冒泡行为
});
默认
网页中的元素,在操作的时候会有自己的默认行为。比如:右击文本框输入区域,会弹出系统菜单、点击超链接会跳转到指定页面、点击提交按
钮会提交数据。
禁用默认行为:event.preventDefault()
注意:
如果想让上面的超链接同时阻止默认行为且禁止冒泡行为,可以把两个方法同时写上:
event.stopPropagation()和event.preventDefault()。这两个方法如果需要同时启用的时候,还有一种简写方案代替,就是直接return false。
如:
$('a').click(function(e){
return false;
});
模拟操作
在事件触发的时候,有时我们需要一些模拟用户行为的操作。例如:当网页加载完毕后自行点击一个按钮触发一个事件,而不是用户去点击。
jQuery为我们提供了两个:
1、. trigger()
2、.triggerHandler()
例1:
//点击按钮事件
$('input').click(function(){
alert('我的第一次点击来自模拟!');
});
//模拟用户点击行为
$('input').trigger('click');
例2:
// 这里效果与例1是一样的
$('input').click(function(){
alert('我的第一次点击来自模拟!');
}).trigger('click');
问题1:当模拟时,需要传递参数怎么办?
答:$('input').click(function(e,data1,data2){
alert(data1+',' +data2);
}).trigger('click',['abc', '123']);
注意:
1、事件执行传递参数,这个参数类似与event.data的额外数据,可以可以是数字、字符串、数组、对象。
2、当传递一个值的时候,直接传递即可。当两个值以上,需要在前后用中括号包含起来。但不能认为是数组形式triggerHandler使用上和上面差不多
如:
$('input').click(function(){
alert('我的第一次点击来自模拟!');
}).triggerHandler ('click');
trigger 与triggerHandler区别
1、triggerHandler()方法并不会触发事件的默认行为,而trigger()会如果我们希望使用.trigger()来模拟用户提交,并且阻止事件的默认行为,则需要这么写:
$('form').submit(function(e){
e.preventDefault(); //阻止默认行为
}).trigger('submit');
2、triggerHandler()方法只会影响第一个匹配到的元素,而trigger()会影响所有
3、triggerHandler()方法会返回当前事件执行的返回值,如果没有返回值,则返回undefined;而.trigger()则返回当前包含事件触发元素的jQuery对象(方便链式连缀调用)
4、trigger()在创建事件的时候,会冒泡。但这种冒泡是自定义事件才能体现出来,是jQuery扩展于DOM的机制,并非DOM特性。而.triggerHandler()不会冒泡
总结:
1、默认行为与冒泡问题
2、返回值问题
3、失明问题
命名空间(后面组件编程时会详细讲到)
有时,我们想对事件进行移除。但对于同名同元素绑定的事件移除往往比较麻烦,这个时候,可以使用事件的命名空间解决。例:
$('input').bind('click.abc',function(){
alert('abc');
});
$('input').bind('click.xyz',function(){
alert('xyz');
});
$('input').unbind('click.abc'); //移除click实践中命名空间为abc的
注意:
也可以直接使用('.abc'),这样的话,可以移除相同命名空间的不同事件。对于模拟操作.trigger()和.triggerHandler(),用法也是一样的。
如:
$('input').trigger('click.abc');
事件委托
什么是事件委托?例1:
有100个学生同时在某天中午收到快递,但这100个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生。
例2:
如果一个企业级应用做报表处理,表格有2000行,每一行都有一个按钮处理。如果用之前的.bind()处理,那么就需要绑定2000个事件,就好比2000个学生同时站在
学校门口等快递,不断会堵塞路口,还会发生各种意外。这种情况放到页面上也是一样,可能导致页面极度变慢或直接异常。而且,2000个按钮使用ajax分页的
话,.bind()方法无法动态绑定尚未存在的元素。就好比,新转学的学生,快递员无法验证他的身份,就可能收不到快递。
而在jQuery中,我们通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素(或祖先元素)上,然后再进行相关处理即可。
堵塞问题解决:将处理的事件交给父元素(或祖先元素)
意外问题解决:动态绑定事件
注意:bind只能绑定已经存在的元素,对于新生成的元素无法动态绑定
自定义事件
事件必须满足三个条件:1、事件必须有名称
2、事件必须绑定在某一个对象上
3、事件必须有触发条件
如:给div添加一个事件,该事件的名称为"itheima12很牛",当点击div的时候,触发click事件的同时触发"itheima12很牛"事件
$(function(){
$("div").unbind("click");
$("div").bind("click",function(){
/**
* 在点击div的时候,触发itheima12很牛事件
*/
//$(this).trigger("第1个自定义事件",5);
//$(this).trigger("第1个自定义事件",[5,6]);
// 这里传的不是数组,而是两个参数
$(this).trigger("第1个自定义事件",{
aa:'aa',
bb:'bb'
});
});
$("div").unbind("第1个自定义事件");
$("div").bind("第1个自定义事件",function(event,json){
alert(json.aa);
alert(json.bb);
});
});
相关文章推荐
- 延迟jquery,ready事件触发的时间
- 第4章 jQuery之dom操作
- 第3章 jQuery之选择器
- 第2章 jQuery之基础核心
- jQuery代码优化:事件委托
- 必须学会使用的35个Jquery小技巧
- jQuery和js 获取父级元素、子级元素、兄弟元素方法
- jQuery.extend和jQuery.fn.extend的区别
- jquery append执行script脚本
- jQuery 读取 JSONArray 的方法
- jQuery、PHP上传图片
- jQuery、PHP上传图片
- 10款无限滚动自动翻页jquery插件
- jquery mobile 入门5 (预加载与缓存页面)
- jquery的val()的简单使用(个人总结)
- jquery控制元素的隐藏和显示的几种方法。
- 基于jquery 封装的 select 小控件,解决 IE6 7 8里 select 边框 高度 无法遮挡等问题
- jQuery对下拉框Select操作总结
- 在jquery中怎么使用css类名和id来获取元素?
- Syntax error, insert "]" to complete MemberExpression XXX.js (Java Web Project 导入Jquery的文件后报错)