jQuery().on方法的使用详解

Posted dajunjun

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery().on方法的使用详解相关的知识，希望对你有一定的参考价值。

从厦门回来之后，两周没写博客了，主要是没时间，先放一张在厦门的靓照

技术图片
技术图片
本文 原文链接 ，希望能帮到这些前端小白。用法：此方法可以在匹配元素上绑定一个或者多个事件处理函数。 使用off()方法可以删除on()方法绑定的事件。

语法结构一

1
$(selector).on(events,[selector],[data],fn)
  • events:一个或多个用空格分隔的事件类型和可选的命名空间。
  • selector:可选。一个选择器字符串，用以过滤选定的元素，该选择器的子元素将调用处理程序。
  • data:可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。
  • fn：该事件被触发时执行的函数。 false值也可以做一个函数的简写，返回false。

实例一

利用 data 参数为绑定的事件处理函数传递数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready((){ 
  var newtext="这是新文本" 
  $("div").on("click",{"mytext":newtext},function(e){ 
大专栏  jQuery().on方法的使用详解ass="line">    $(this).text(e.data.mytext); 
  }) 
}) 
``` 



通过通过选择器字符串来过滤匹配元素的子元素中哪些可以响应绑定的事件。下面的代码中，类名为children的元素和它的子元素可以调用绑定的事件

``` bash
$(document).ready((){ 
  var newtext="这是新文本" 
  $(".parent").on("click",".children",{"mytext":newtext},function(e){ 
    $(this).text(e.data.mytext); 
  }) 
})

语法结构二

1
$(selector).on(object,[selector],[data])
  • object:一个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数
    其他两个参数与之前的结构一样

实例一

1
2
3
4
5
6
$(document).ready((){ 
  var newtext="这是新文本" 
  $("div").on({click:function(e){ 
    $(this).text(e.data.mytext); 
  }},{"mytext":newtext}) 
})

以上代码中，事件类型和事件处理函数以对象的形式绑定的。

以上是关于jQuery().on方法的使用详解的主要内容，如果未能解决你的问题，请参考以下文章

jQuery().on方法的使用详解

jQuery().on方法的使用详解

详解jQuery中 .bind() vs .live() vs .delegate() vs .on() 的区别

JQuery中on()函数详解

jQuery事件绑定on()bind()live()与delegate() 方法详解

jQuery的DOM操作