jQuery on()方法示例及jquery on()方法的优点

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绑定事件的方法有几种，推荐使用.on()方法绑定，原因有两点：

1.on()方法可以绑定动态添加到页面元素的事件

比如动态添加到页面的DOM元素，用.on()方法绑定的事件不需要关心注册该事件的元素何时被添加进来，也不需要重复绑定。有的同学可能习惯于用.bind()、.live()或.delegate()，查看源码就会发现，它们实际上调用的都是.on()方法，并且.live()方法在jQuery1.9版本已经被移除。

bind:
function(
 types, data, fn ) {
  return this.on(
 types, null,
 data, fn );
},
live:
function(
 types, data, fn ) {
  jQuery(
this.context
 ).on( types, this.selector,
 data, fn );
  return this;
},
delegate:
function(
 selector, types, data, fn ) {
  return this.on(
 types, selector, data, fn );
}

移除.on()绑定的事件用.off()方法。

2.on()方法绑定事件可以提升效率

很多文章都提到了利用事件冒泡和代理来提升事件绑定的效率，大多都没列出具体的差别，所以为了求证，我做一个小测试。

假设页面添加了5000个li，用chrome开发者工具Profiles测试页面载入时间。

普通绑定（姑且这么称呼它）

$('li').click(function(){
  console.log(this)
});

绑定过程的执行时间

2013-08-13_190358

普通绑定相当于在5000li上面分别注册click事件，内存占用约4.2M，绑定时间约为72ms。

.on()绑定

$(document).on('click',
'li',
function(){
  console.log(this)
})

绑定过程的执行时间

2013-08-13_191010

.on()绑定利用事件代理，只在document上注册了一个click事件，内存占用约2.2M，绑定时间约为1ms。

以上就是本文的全部内容，希望对大家学习jquery on()方法有所帮助。

赞 (0)

相关推荐

  • jQuery中on()方法用法实例

    本文实例讲述了jQuery中on()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以在匹配元素上绑定一个或者多个事件处理函数. 使用off()方法可以删除on()方法绑定的事件. 语法结构一: 复制代码 代码如下: $(selector).on(events,[selector],[data],fn) 参数列表: 参数 描述 events 一个或多个用空格分隔的事件类型和可选的命名空间. selector 可选.一个选择器字符串,用以过滤选定的元素,该选择器的后裔元素将调用处理程序.

  • Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    详细解读Jquery各Ajax函数: $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个参数为服务器的状态,是可选参数. 而其中,服务器返回数据的格式其实是字符串形势,并不是我们想要的json数据格式,在此引用只是为了对比说明 复制代码 代码如下: $.get("dat

  • Jquery中"$(document).ready(function(){ })"函数的使用详解

    Jquery是优秀的Javascrīpt框架,$是jquery库的申明,它很不稳定(我就常遇上),换一种稳定的写法jQuery.noConflict(); jQuery(document).ready(function(){}); 使用jQuery的好处是它包装了各种浏览器版本对DOM对象(javascript的DOM对象你应该知道吧,就是它了)的操作. 比如jquery写法:$("div p"); // (1)$("div.container"); // (2)$

  • 浅析jQuery(function(){})与(function(){})(jQuery)之间的区别

    Jquery是优秀的Javascrīpt框架.我们现在来讨论下在 Jquery 中两个页面载入后执行的函数. $(document).ready(function(){  // 在这里写你的代码...});在DOM加载完成时运行的代码 可以简写成 jQuery(function(){ }); (function($) {})(jQuery)什么意思?(function(){ })(jQuery); 其实际上是执行()(para)匿名方法,只不过是传递了jQuery对象. 相当于 function

  • jQuery中on()方法用法实例详解

    本文实例分析了jQuery on()方法的用法.分享给大家供大家参考.具体分析如下: 一.jQuery on()方法的使用:   on(events,[selector],[data],fn)   events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" . selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代.如果选择器为null或省略,当它到达选定的元素,事件总是触发. data:当

  • 关于jQuery新的事件绑定机制on()的使用技巧

    今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn) events:一个或多个用空格分隔

  • jQuery中position()方法用法实例

    本文实例讲述了jQuery中position()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取匹配元素相对某些元素的偏移量. 返回的对象包含两个整型属性(top和left)的对象. 此方法只对可见元素有效. 语法结构: 复制代码 代码如下: $(selector).position() 在教程的开头之所以说是获取匹配元素相对于某些元素的偏移量.很多教程都说方法返回的偏移量是相对于父元素,其实并非完全如此,此方法会将匹配元素以绝对定位方式处理,当然并不是说真的将匹配元素设置为绝对定位.

  • jQuery on()方法示例及jquery on()方法的优点

    jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法有. bind() $("p").bind("click",function(){ alert("The paragraph was clicked."); }); $("p").on("click",func

  • Java线程中的常见方法(start方法和run方法)

    Java线程中的常见方法(start方法和run方法)

    目录 start方法和run方法 示例代码 注意 sleep方法与yield方法 sleep yield 线程优先级 sleep的应用-防止cpu占用100% join方法 有实效的等待 interrupt方法 打断正常运行的线程,不会清空打断状态 守护线程 start方法和run方法 $start()$方法用来启动一个线程,这时此线程处于就绪(可运行)状态,并没有运行,一旦得到$cpu$时间片,就开始执行$run()$方法.而直接调用$run()$方法,仅仅只是调用了一个类里的方法,其本质上还

  • jQuery插件artDialog.js使用与关闭方法示例

    本文实例讲述了jQuery插件artDialog.js使用与关闭方法.分享给大家供大家参考,具体如下: 子窗口关闭artdialog终极解决方案: window.parent.window.art.dialog({ id: 'qin123' }).close(); <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

  • jQuery prototype冲突的2种解决方法(附demo示例下载)

    本文实例分析了jQuery prototype冲突的2种解决方法.分享给大家供大家参考,具体如下: jquery和prototype怎么会冲突,归根到底就是因为他们二个都用到了$,同时用,混淆了.这个问题解决过不下5次,每次解决都要查一下.淡疼,嘿嘿. 方法一.在jquery的核心库文件中加代码. 1.一般是jquery.js,或者jquery.min.js,有的带版本号的.知道是哪个文件就行. })( window ); jQuery.noConflict(); //最后面,加上这一行. 2.

  • 使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)

    使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)

    这是一个示例: <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").cl

  • jQuery实现滚动到底部时自动加载更多的方法示例

    本文实例讲述了jQuery实现滚动到底部时自动加载更多的方法.分享给大家供大家参考,具体如下: 这里利用AJAX,实现滚动到底加载数据功能: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/

  • jQuery编程动画的基本方法示例详解

    目录 一.动画 .show() .hide() .fadeIn() .fadeOut() .animate() .slideDown() .slideUp() .delay() .clearQueue() .fadeTo() 一.动画 jQuery提供了一些列的动画基本方法,同时也提供了自定动画方案.animate(). .show() 当提供一个 duration(持续时间)参数,.show()成为一个动画方法..show()方法将为匹配元素的宽度,高度,以及不透明度,同时进行动画操作. 持续

  • jQuery.extend()、jQuery.fn.extend()扩展方法示例详解

    jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: 复制代码 代码如下: jQuery.extend({ showName : function(name){ alert(name) } }); jQuery.showName("深蓝"); jQuery.extend()除了可以创建插件外,还可以用

  • JQuery中serialize()、serializeArray()和param()方法示例介绍

    下面是服务器端的jsp代码: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% request.setCharacterEncoding("UTF-8"); String username = request.getParameter("username"); String content = r

  • jquery each的几种常用的使用方法示例

    jQuery源码里自己也有很多用到each方法.其实jQuery里的each方法是通过js里的call方法来实现的.下面简单介绍一下call方法. call这个方法很奇妙,其实官方的说明是:"调用一个对象的一个方法,以另一个对象替换当前对象."网上更多的解释是变换上下文环境,也有说是改变上下文this指针. 复制代码 代码如下: call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 参数 thisObj  可选项.将被用作当前对象的对象.arg1,

随机推荐