jquery on事件jquery on实现绑定多个事件

API上jquery on介绍

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

概述

在选择元素上绑定一个或多个事件的事件处理函数。

on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件，请参阅.off()。要附加一个事件，只运行一次，然后删除自己， 请参阅.one()

参数

events,[selector],[data],fnV1.7

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

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

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

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

events-map,[selector],[data]V1.7

events-map:个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。

selector:一个选择器字符串过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发。

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

示例

描述:

Display a paragraph's text in an alert when it is clicked:

$("p").on("click", function(){ alert( $(this).text() ); });

Pass data to the event handler, which is specified here by name:

function myHandler(event) { alert(event.data.foo); } $("p").on("click", {foo: "bar"}, myHandler)

Cancel a form submit action and prevent the event from bubbling up by returning false:

$("form").on("submit", false)

Cancel only the default action by using .preventDefault().

$("form").on("submit", function(event) {  event.preventDefault(); });

Stop submit events from bubbling without preventing form submit, using .stopPropagation().

$("form").on("submit", function(event) {  event.stopPropagation(); });

jQuery on()方法是官方推荐的绑定事件的一个方法。

$(selector).on(event,childSelector,data,function,map)

由此扩展开来的几个以前常见的方法有.

bind()

　　$("p").bind("click",function(){

　　　　alert("The paragraph was clicked.");

　　});

　　$("p").on("click",function(){

　　　　alert("The paragraph was clicked.");

　　});

delegate()

　　$("#div1").on("click","p",function(){

　　　　$(this).css("background-color","pink");

　　});

　　$("#div2").delegate("p","click",function(){

　　　　$(this).css("background-color","pink");

　　});

live()

　　$("#div1").on("click",function(){

　　　　$(this).css("background-color","pink");

　　});

　　$("#div2").live("click",function(){

　　　　$(this).css("background-color","pink");

　　});

以上三种方法在jQuery1.8之后都不推荐使用，官方在1.9时已经取消使用live()方法了，所以建议都使用on()方法。

tip:如果你需要移除on()所绑定的方法，可以使用off()方法处理。

$(document).ready(function(){

　　$("p").on("click",function(){

　　　　$(this).css("background-color","pink");

　　});

　　$("button").click(function(){

　　　　$("p").off("click");

　　});

});

tip:如果你的事件只需要一次的操作，可以使用one()这个方法

$(document).ready(function(){

　　$("p").one("click",function(){

　　　　$(this).animate({fontSize:"+=6px"});

　　});

});

trigger()绑定

$(selector).trigger(event,eventObj,param1,param2,...)

$(document).ready(function(){

　　$("input").select(function(){

　　　　$("input").after(" Text marked!");

　　});

　　$("button").click(function(){

　　　　$("input").trigger("select");

　　});

});

多个事件绑定同一个函数

$(document).ready(function(){

  $("p").on("mouseover mouseout",function(){

    $("p").toggleClass("intro");

  });

});

多个事件绑定不同函数

$(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");}  

  });

});

绑定自定义事件

$(document).ready(function(){

  $("p").on("myOwnEvent", function(event, showName){

    $(this).text(showName + "! What a beautiful name!").show();

  });

  $("button").click(function(){

    $("p").trigger("myOwnEvent",["Anja"]);

  });

});

传递数据到函数

function handlerName(event) 

{

  alert(event.data.msg);

}

$(document).ready(function(){

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

});

适用于未创建的元素

$(document).ready(function(){

  $("div").on("click","p",function(){

    $(this).slideToggle();

  });

  $("button").click(function(){

    $("<p>This is a new paragraph.</p>").insertAfter("button");

  });

});

前几天在看《jquery基础教程》，看到事件委托的时候，关于live()方法讲的不是很详细，就去搜了一下关于live()和delegate()的。

然后在一处看到live()已经被移除了，囧，然后去看了最新的jq源码，果然被移除了，现在是1.9.1版本，不知道live()是在之前哪个版本被移除的，惭愧啊，之前都没留意。

看源码发现bind()和delegate()都是由on()实现的。on()的描述如下：

复制代码代码如下:

.on( events [, selector ] [, data ], handler(eventObject) )

一个简单的事件绑定如 $('button').on('click',function(){}); 与bind()无二样。

在需要为较多的元素绑定事件的时候，优先考虑事件委托，可以带来性能上的好处。比如：

如上图，将click事件绑定在document对象上，页面上任何元素发生的click事件都冒泡到document对象上得到处理。

注意到.on()的描述中第二个可选参数：selector。如下图，添加了第二个参数，选择符button：

结果：

当事件冒泡到document对象时，检测事件的target，如果与传入的选择符（这里是button）匹配，就触发事件，否则不触发。

注意.on()也可以接收一个对象参数，该对象的属性是事件类型，属性值为事件处理函数。下面是官方文档的一个例子：

最后有一点，原先的live()方法，处理函数是默认绑定在document对象上不能变的，如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致较大的性能损失。而使用.on()方法，事件只会绑定到$()函数的选择符表达式匹配的元素上（上面我的例子中，为了简单绑定到了document），因此可以精确地定位到页面中的一部分，而事件冒泡的开销也可以减少。delegate()与on()同理，毕竟是用on()实现的：