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

时间：2019-10-21 11:34:36 收藏：0 阅读：108

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

技术图片

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

语法结构一

1	$(selector).on(events,[selector],[data],fn)

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

实例一

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

$(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:一个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数
其他两个参数与之前的结构一样

实例一

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

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