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()实现的:

jquery on事件jquery on实现绑定多个事件的更多相关文章

  1. javascript事件委托,事件代理,元素绑定多个事件之练习篇

    <ul id="parent-list"> <li id="post-1">item1</li> <li id=&qu ...

  2. jQuery的on方法和bind绑定多个事件

    on方法是官方推荐使用的方法比较新 1. on: 多个事件绑定同一个函数 $(document).ready(function(){ $("p").on("mouseov ...

  3. jquery中动态添加的标签绑定的click事件失效的解决办法

    把.click()换成.live('click',function(){})(如果你的jquery的版本是1.10之前) 把.click()换成.on('click',function(){})(jq ...

  4. window.onload绑定多个事件 —— 两种解决方案

    前言 有些函数,必须在网页加载完毕后执行.比如:涉及DOM操作的. 网页加载完毕时会触发一个onload事件,将函数绑定到这个事件上即可. window.onload = myFunction; 问题 ...

  5. jQuery对 动态添加 的元素 绑定事件(on()的用法)

    从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...

  6. JS与Jquery的事件委托——解决了绑定相同事件的问题

    概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完 ...

  7. jQuery事件之on()方法绑定多个选择器,多个事件

    这样一个需求,如果用live()方法实现的话 非常简单,容易理解. $('nav li, #sb-nav li, #help li').live('click', function () { // c ...

  8. jQuery 1.7以后 jQuery2 新元素绑定事件on替代live

    最近做了一个类别动态加载的功能,jQuery版本用的是2.02. 绑定事件jQuery1.7之前用的是live或者是bind.新版的jQuery新增了on方法 由于子类别是动态加载的,默认是不会有事件 ...

  9. jQuery delegate方法实现Ajax请求绑定事件不丢失

    给元素绑定click事件后 ,遇到一个问题:当执行一些ajax请求,再次调用此页面,里面的这个click事件就失效了 比如说:我的分页是一个ajax请求 但我点下一页时 后生成的元素a就没有了clic ...

  10. 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件。

    http://caibaojian.com/css3/experience/bugs.htm 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件. ...

随机推荐

  1. [AX]AX2012 R2 HR Jobs, Positions, Department和Workers

    部门.作业(Job的官方翻译)和位置(Position的官方翻译)是AX人力资源管理的基本组织元素,Job和Position在AX有的地方又称作工作和职位,其实这个翻译更为恰当. Job定义的是一个工 ...

  2. polarssl rsa & aes 加密与解密

    上周折腾加密与解密,用了openssl, crypto++, polarssl, cyassl, 说起真的让人很沮丧,只有openssl & polarssl两个库的RSA & AES ...

  3. iOS UTI(统一类型标识)

    同一类型标识符(Uniform Type Identifier,UTI)代表IOS信息共享的中心组件.可以把它看成下一代的MIME类型.UTI是标识资源类型(比如图像和文本)的字符串,他们制定哪些类型 ...

  4. Splash images_enabled 属性

    images_enabled属性用于设置加载页面时是否加载图片,如下,禁止之后,返回的页面截图就不会带有任何图片,加载速度也会快很多 function main(splash, args) splas ...

  5. Linux命令之乐--iconv

    用法: 实际应用: 批量转换文件编码: [root@wls12c PCK]$ for tfile in `ls -l|awk '{print $9}'`;do echo "iconv -f ...

  6. 64位Oracle 11g 使用PL/SQL

    Oracle 11g和PL/SQL安装完后,发现打开PL/SQL并不能连接Oracle数据库! [第一回合]完败! 先是在网上找解决方法,说是需要使用Net Configuration Assista ...

  7. BugHD 与你的应用一起成长

    BugHD 新增功能 1.新增安装量.启动量的统计功能 BugHD SDK 1.3.0新增安装量.启动量的统计功能,在崩溃分析页面右上角可看到安装量和启动量. BugHD 体验优化 1.Android ...

  8. codeforces水题100道 第十题 Codeforces Round #277 (Div. 2) A. Calculating Function (math)

    题目链接:www.codeforces.com/problemset/problem/486/A题意:求表达式f(n)的值.(f(n)的表述见题目)C++代码: #include <iostre ...

  9. jQuery给动态添加生成的元素绑定事件的方法

    <div id="testdiv">   <ul></ul> </div> 需要给<ul>里面动态添加的<li&g ...

  10. Web服务器配置Gzip压缩提升网站性能

    前言: HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术.大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度.这一般是指WWW服务器中安装的一个功能,当有人来访问这个服 ...