jQuery初级--jQuery中的on()方法

   jQuery中的on()函数用于为指定元素的一个或多个事件绑定事件处理函数。此外,你还可以额外传递给事件处理函数一些所需的数据。从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、delegate()、 live()等事件函数。

   on()方法支持直接在目标函数上绑定事件,也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定的情况下,即使是执行on()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数就有效。此外,该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

   如果要删除通过on()绑定的事件,我们需要使用off()函数。如果要附加一个事件,只执行一次,然后删除自己,请使用one()函数。

   接下来举一些例子说明on()方法的使用。

1、jQuery为多个选择器绑定同一个事件

$("div span").on('click',function(){
     $("div").css('backgroundColor','red');
});
2、多个事件绑定一个函数

$("div").on('click  mouseover',function(){
    $("div").css('backgroundColor','yellow');
});
3、多个事件绑定不同的函数

$("div").on({
        'click':function(){
              $("div").css('backgroundColor', 'yellow');
        },
         'mouseover':function(){
               $("div").css('width', '200px');
        }
});
4、如果需要移除on()所绑定的方法,可以使用off()方法处理
 $("div").on('click  mouseover',function(){
       $("div").css('backgroundColor','yellow');
       $("div").off('mouseover');
 });


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值