jQuery中的on()方法中的使用

此方法可以在匹配元素上绑定一个或者多个事件处理函数。
使用off()方法可以删除on()方法绑定的事件。

语法结构一:
$(selector).on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间。
selector:可选。一个选择器字符串,用以过滤选定的元素,该选择器的后裔元素将调用处理程序。如果选择是空或被忽略,当它到达选定的元素,事件总是触发。
data:可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。
fn:该事件被触发时执行的函数。 false值也可以做一个函数的简写,返回false//为div绑定一个click事件
$("div").on("click",function(){ 
    $(this).text("Holle world."); 
  }) 

//为div绑定了两个事件,多个事件空格分开
 $("div").on("click mousemove",function(){ 
    $(this).text("Holle world."); 
  })
  //为.article绑定了两个事件以及两个触发类,触发类需是.article的后代元素,中间用,号分开
 $(".article").on("click mouseenter", " .amend ,.compile", function (e) {
        alert(e);
    })    

//用data参数为绑定的事件处理函数传递数据。
 var newtext="这是新文本" 
  $("div").on("click",{"mytext":newtext},function(e){ 
    $(this).text(e.data.mytext); 

//通过选择器字符串来过滤匹配元素的后代元素中哪些可以响应绑定的事件.
//div的children类的子元素触发事件
//该代码类名为children的元素和它的子元素可以调用绑定的事件。
 var newtext="这是新文本" 
  $("div").on("click",".children",{"mytext":newtext},function(e){ 
    $(this).text(e.data.mytext); 
  }) 

语法结构二:
$(selector).on(object,[selector],[data])

object  一个用字符串表示的,一个或多个空格分隔的事件类型和可选的命名空间,值表示事件绑定的处理函数。
selector    可选。一个选择器字符串,用以过滤选定的元素,该选择器的后裔元素将调用处理程序。
如果选择是空或被忽略,当它到达选定的元素,事件总是触发。
data    可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。

//事件类型和事件处理函数以对象的形式绑定的。
 var newtext="这是新文本" 
  $("div").on({click:function(e){ 
    $(this).text(e.data.mytext); 
  }},{"mytext":newtext}) 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值