• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery事件绑定.on()简要概述及应用

jQuery事件绑定.on()简要概述及应用

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了事件绑定,on等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

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

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

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

  

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

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


结果:

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

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

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

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jQuery 全选 全不选 事件绑定的实现代码
  • jQuery事件绑定方法学习总结(推荐)
  • jquery事件绑定解绑机制源码解析
  • jQuery事件绑定用法详解
  • Jquery on方法绑定事件后执行多次的实现方法
  • 深入理解jQuery事件绑定
  • 浅析jquery unbind()方法移除元素绑定的事件
  • jQuery事件绑定on()与弹窗实现代码
  • jQuery实现按钮只点击一次后就取消点击事件绑定的方法
  • JQuery中DOM事件绑定用法详解

相关文章

  • 2017-08-16跨帧结构无限级菜单
  • 2017-08-16jQuery+ajax实现修改密码验证功能实例详解
  • 2017-08-16jQuery中Dom的基本操作小结
  • 2017-08-16jQuery each()小议
  • 2017-08-16JQuery Mobile实现导航栏和页脚
  • 2017-08-16jquery1.9 下检测浏览器类型和版本的方法
  • 2017-08-16tuzhu_req.js 实现仿百度图片首页效果
  • 2017-08-16jQuery中animate动画第二次点击事件没反应
  • 2017-08-16JQuery 引发两次$(document.ready)事件
  • 2017-08-16为jQuery.Treeview添加右键菜单的实现代码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery实现文本展开收缩特效
    • jQuery聚合函数实例
    • 基于jquery固定于顶部的导航响应浏览器滚动条事件
    • jQuery ajax 当async为false时解决同步操作失败的问题
    • jquery实现在光标位置插入内容的方法
    • jQuery选择器及jquery案例详解(必看)
    • 在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
    • JQuery的自定义事件代码,触发,绑定简单实例
    • jquery中each遍历对象和数组示例
    • 使用JQuery实现智能表单验证功能

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有