您的位置：首页 > Web前端 > jquery > 正文

jQuery on()方法

更多时间：2014-9-11 类别：Web前端浏览量：755

jQuery on()方法

jQuery on()方法

一、jQuery on()方法的使用

on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

二、jQuery on()方法的优点：

1、提供了一种统一绑定事件的方法

2、仍然提供了.delegate()的优点，当然如果需要你也可以直接用.bind()

三、与.bind(), .live(), .delegate()的比较

1、其实.bind(), .live(), .delegate()都是通过.on()来实现的

JScript 代码复制


bind: function( types, data, fn ) ...{
        return this.on( types, null, data, fn );
    },
    unbind: function( types, fn ) ...{
        return this.off( types, null, fn );
    },

    live: function( types, data, fn ) ...{
        jQuery( this.context ).on( types, this.selector, data, fn );
        return this;
    },
    die: function( types, fn ) ...{
        jQuery( this.context ).off( types, this.selector || "**", fn );
        return this;
    },

    delegate: function( selector, types, data, fn ) ...{
        return this.on( types, selector, data, fn );
    },
    undelegate: function( selector, types, fn ) ...{
        // ( namespace ) or ( selector, types [, fn] )
        return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
    }

2、用.bind()的代价是非常大的，它会把相同的一个事件处理程序hook到所有匹配的DOM元素上

3、不要再用.live()了，它已经不再被推荐了，而且还有许多问题

4、.delegate()会提供很好的方法来提高效率，同时我们可以添加一事件处理方法到动态添加的元素上。

5、我们可以用.on()来代替上述的3种方法

四、jQuery on()方法的使用示例

1、绑定click事件，使用off()方法移除on()所绑定的方法

JScript 代码复制


$(document).ready(function()...{
$("p").on("click",function()...{
$(this).css("background-color","pink");
});
$("button").click(function()...{
$("p").off("click");
});
});

2、多个事件绑定同一个函数

JScript 代码复制


$(document).ready(function()...{
  $("p").on("mouseover mouseout",function()...{
    $("p").toggleClass("intro");
  });
});

3、多个事件绑定不同函数

JScript 代码复制


$(document).ready(function()...{
  $("p").on(...{
    mouseover:function()...{$("body").css("background-color","lightgray");},  
    mouseout:function()...{$("body").css("background-color","lightblue");}, 
    click:function()...{$("body").css("background-color","yellow");}  
  });
});

4、绑定自定义事件

JScript 代码复制


$(document).ready(function()...{
  $("p").on("myOwnEvent", function(event, showName)...{
    $(this).text(showName + "! What a beautiful name!").show();
  });
  $("button").click(function()...{
    $("p").trigger("myOwnEvent",["Anja"]);
  });
});

5、传递数据到函数

JScript 代码复制


function handlerName(event) 
...{
  alert(event.data.msg);
}

$(document).ready(function()...{
  $("p").on("click", ...{msg: "You just clicked me!"}, handlerName)
});

6、适用于未创建的元素

JScript 代码复制


$(document).ready(function()...{
  $("li").on("click","p",function()...{
    $(this).slideToggle();
  });
  $("button").click(function()...{
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});

标签：jQuery on()

上一篇：C#中ICollection介绍

下一篇：如何提高网站的用户粘度

您可能感兴趣

排行榜

1
jQuery on()方法

jQuery on()方法

jQuery on()方法

热门推荐

排行榜