jQuery自学教程(五)——事件对象

一、事件对象

js在事件处理函数中默认传递了event对象,jQuery在封装的时候,解决了兼容性问题,而且创建了一些非常好用的属性和方法。

事件对象就是event对象,通过处理函数默认传递接受。


二、事件冒泡

在页面中可以有多个事件,也可以多个元素响应同一个事件。如果在页面上有两个元素嵌套,则在内部元素中绑定的事件也会在外部元素上绑

定,造成多重响应,触发的顺序是从小范围到大范围,一层层往上。事件冒泡可能会造成很多不必要的麻烦,因此jQuey提供了一个事件对象的方法,

event.stopPropagation(),这个方法设置需要绑定在触发的事件上所有上层的冒泡行为都将被取消。

另,jQuery还提供了一种阻止默认行为(比如右击文本框弹出系统菜单,点submit表单提交等等)的方法:event.preventDefault()

下表是列举的jQuery提供的一系列方法:


三、模拟操作

在事件触发的时候,有时需要模拟用户行为的操作,例如当页面加载完全之后自动点击一个按钮触发一个事件。jQuery提供了trigger()方法。

eg1: $('input').click(function(e,data1,data2...){

alert('123');

}).trigger('click',['123','abc',[a,s,d]]);(trigger()方法中同样可以传递额外的data)

这样之后每当浏览器加载完毕就会自动触发该click事件。

eg2:$('input').bind('myEvent',function(){

$(this).after('1');

})

  $('button').click(function(){

$('input').trigger('myEvent');

)

这样之后每当按下按钮,便会触发input的myEvent事件。

注意这里是添加的自定义事件,本身不会有任何响应,需要结合trigger才会有反应

Ps:除了trigger()方法,jQuery还提供了triggerHander()方法,二者主体功能相同,有些许区别。

1、trigger会触发事件的默认行为(比如submit)而triggerHandler不会

2、trigger会影响到所有匹配到的元素,而triggerHandler只会影响第一个匹配到的元素

3、trigger返回的是jQuery对象,而triggerHandler方法返回的是当前事件执行的返回值,如果没有返回值则返回undefined

4、trigger在创建事件的时候会冒泡,但是这种冒泡通过自定义事件才可以显现出来,而triggerHandler不会冒泡

四、事件委托

如果需要绑定很多个事件,一个一个使用bind的话就很繁琐,而且效率低下。因此提出事件委托的概念。其本质是把事件绑定在document上,通过事件冒泡的方式,使得符合选择器选择出的子元素绑定了事件。由于其实际上是绑定的document,因此无论有多少子元素,其本质上都只绑定了一次。

之前有live(),die(),delegate()方法,但是由于其或多或少的缺陷,均被废弃,现在常用的方法是:

on(),off(),one()

新的绑定方法:on()

新的解绑方法:off()

on(),off()的使用方法,包括阻止冒泡(stopPropagation),阻止默认事件(preventDefault()),都和bind,unbind方法类似。

one()绑定元素执行完毕后自动移除事件,可以用于方法只执行一次的事件。


eg:$(父元素).on(事件,子元素,回调函数)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值