Jquery的on()方法使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
此方法可以在匹配元素上绑定一个或者多个事件处理函数。
使用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})