免费刷金币,请点击这里
TE社区 > 前端技术
客服QQ:1206116161

jQuery中dom元素上绑定的事件详解

医你心事 于 2018-05-20 14:00:06 创建话题
(33)
(0)
举报

作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的。比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台。。。

好,不扯远,说说当你想看到网站上某个元素绑定的事件函数的代码时应该怎么做吧。

查看原生绑定的事件函数代码

所谓原生就是通过addEventListener方法绑定到dom元素上。这个好办:

审查绑定事件的元素(对着它右键->审查元素)在弹出的Elements视图的控制台,右侧点击“Event Listeners”页签然后就能看到所有绑定在该元素的事件了,点开后,找到handler,右击鼠标,选择“Show Function Definition”菜单。就能跳到绑定到该元素的事件函数的源码位置了。有图有真相:

查看jquery绑定的事件函数代码

嗯,我知道,你遇到问题了吧,所有jquery绑定的事件函数,你通过上面的方式,跳到的都是jquery的代码,而且永远是那一个地方。看了跟没看一样。所以,宝哥在这里教你针对jquery的查看方式。

还是审查元素点击“Properties”视图。选择第一个,展开找到一个‘jQueryxxxxx(一串数字)'这样的属性,记住它的值(一般是一个数字)N

然后左侧切到Console视图,在控制台里执行$.cache[N],这里的N是前面那个属性值

然后就会出来绑定在这个元素上的东西了。展开events,里面就有你想要查看的真实函数了。右击具体事件下的handle后面的function…,然后选择“Show Function Definition”就可以看到了。

例子=》http://demo.sudodev.cn/frontend/jqDetect查看jquery2.x版本绑定的事件函数代码

好的,我知道,你肯定又遇到问题了。因为当你使用的jquery2.x版本的jquery时,上面的这个方法又不work了,原因是2.x的代码架构变了。其实2.x版本的事件仍然是用的cache机制,但不像1.x版本暴露到外面去了,而是封装起来,并且存在了闭包对象data_priv中,而且一般使用的是jquery的压缩版本,这个data_priv名字你也无法查看到。所以在查看过jquery2.x版本的源码后,宝哥教你如何定位它:

直接进入控制台,构造一个包含jQuery的对象,以便在控制台里查看jQuery。比如输入var o={j:$},这样做的好处是,你执行后能在控制吧里查看jQuery的所有属性

然后在控制台展开jQuery(这里是j)对象,找到_queueHooks这个方法,看到它的代码大概是“return L.get(a,c)||L.access…”这种,记住这个L也可能是不是L)

展开任意一个j下面首层的对象,比如就是上面的_queueHooks,找到展开,再展开下面的Closure,找到前面的那个“L”对句,对着它后面的字母右键,选择“Store as Global Variable”

然后控制台里就打出一个tempX的对象,它就那个装着cache的东东。假设它叫temp1。那个temp1有个get方法可以直接获取它的cache对象。假如你要查看绑定事件的对象的id叫clickMe。那执行temp1.get($('#clickMe').get(0))(或者temp1.get(document.querySelector('#clickMe'))))就会打出跟上面jquery1.x版本相当的东西

后面就跟上面jquery1.x的方式一样例子=》http://demo.sudodev.cn/frontend/jq2Detect另:

以上默认是在chrome浏览器下做的操作,其实在Firefox下也是类似的,相信作为一个技术人员,你应该能举一反三的。至于IE嘛,呃…当我没说哈。:)

更新:

1.为省去查看属性的麻烦,jquery1.x可以直接在控制台执行$.cache[$('#clickMe').get(0)[$.expando]]输出元素上绑定的东西,而不是先去查看元素上jQueryxxxxxxx的属性的值了

2.经过一篇查阅和测试。有一个新的目前最省力而且jquery1,jquery2都适用的办法是,直接在控制台输入$._data($('#clickMe').get(0)),即可把绑定在元素的东西都输出来。但是,从jquery2的源码的注释中发现,$._data会在之后的新版本中废除。所以上面介绍的方法仍然是很有价值的。授人以鱼,不如授人以渔嘛,:)

扫码关注TE官方微博 扫码关注TE官方微博
分享12个非常实用的JavaScript小技巧 js实现div层缓慢收缩与展开的方法 快速查询Python文档方法分享 JS+CSS实现鼠标滑过时动态翻滚的导航条效果 javascript不同类型数据之间的运算的转换方法 用hover配合(纯css)position实现网页动态展示效果 Router解决跨模块下的页面跳转示例 JavaScript中的FileReader图片预览上传功能实现代码 Python使用MD5加密算法对字符串进行加密操作示例 3种js实现string的substring方法 JS自动倒计时30秒后按钮才可用(两种场景) jsonp原理及使用 html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法 Java编程中的构造函数详细介绍 CSS学习笔记之常用Mixin封装实例代码 实现jsp验证码的简单小例子 积分获取和消费的存储过程学习示例 Symfony2框架学习笔记之表单用法详解 javascirpt实现2个iframe之间传值的方法 IIS下配置页面重写(配合插件url-rewrite2去除页面后缀名)的实现方法 Bootstrap常用组件学习(整理) 在Mac OS上安装使用Node.js的项目自动化构建工具Gulp jquery获取checkbox的值并post提交 SQL SERVER数据操作类代码 php实现两表合并成新表并且有序排列的方法 knockoutjs模板实现树形结构列表 多年卖米给终端 没想到反被套路 函数式 JavaScript(一)简介 iOS开发--仿新闻首页效果WMPageController的使用详解 vue2.5.2使用http请求获取静态json数据的实例代码 JS组件Bootstrap导航条使用方法详解 PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】 基于spring boot 1.5.4 集成 jpa+hibernate+jdbcTemplate(详解) DEDECMS删除指定IP的评论 Angular2 (RC4) 路由与导航详解 Python for循环生成列表的实例 一个获取第n个元素节点的js函数 javascript 判断两个日期之差的示例代码 css实现鼠标滑过改变文字(中文变英文) javaScript生成支持中文带logo的二维码(jquery.qrcode.js) javaScript 利用闭包模拟对象的私有属性 WebSocket+node.js创建即时通信的Web聊天服务器 jQuery实现获取隐藏div高度的方法示例 javascript自动恢复文本框点击清除后的默认文本 解决ios模拟器不能弹出键盘问题的方法 Ubuntu 12.04解决重启后resolv.conf清空的问题 天翼开放平台免费短信验证码接口使用实例 Python中turtle作图示例 iOS用UITextField切换明文_密文显示时末尾空白的问题解决 jquery使用hide方法隐藏指定id的元素 JavaScript设置获取和设置属性的方法 jQuery插件Tmpl的简单使用方法 织梦DedeCms系统未审核文档禁止动态浏览修改方法(view.php) pycharm中连接mysql数据库的步骤详解 浅谈CSS在前端优化中一些值得注意的关键点 js小数运算出现多位小数如何解决 Jquery替换已存在于element上的event的方法 如何解决Linux系统下Docker占满分区的问题 Vue侧滑菜单组件——DrawerLayout jQuery为动态生成的select元素添加事件的方法 Node.js 异步异常的处理与domain模块解析 JavaScript版的TwoQueues缓存模型 jquery入门必备的基本认识及实例(整理) js鼠标按键事件和键盘按键事件用法实例汇总 node.js中的emitter.on方法使用说明 CSS解决页面图片水平垂直居中问题的方法 多个表单中如何获得这个文件上传的网址实现js代码 python实现数据写入excel表格 MySql服务未知原因消失解决方法 下拉菜单点击实现连接跳转功能的js代码 JavaScript 原型与继承说明 Ionic + Angular.js实现图片轮播的方法示例 用js实现控件的隐藏及style.visibility的使用 JavaScript window.location对象 python 地图经纬度转换、纠偏的实例代码 jQuery validate验证插件使用详解 JavaScript正则表达式校验与递归函数实际应用实例解析 PHP中iconv函数转码时截断字符问题的解决方法 Javascript中关于Array.filter()的妙用详解 JavaScript中检查对象property的存在性方法介绍 Ajax Control Toolkit 34个服务器端控件第1_2页 在Sql Server中调用外部EXE执行程序引发的问题 让IntelliJ IDEA支持.vue文件的方法 nginx修改默认运行80端口的方法 js实现点击左右按钮轮播图片效果实例 调试Node.JS的辅助工具(NodeWatcher) js控制多图左右滚动切换效果代码分享 JavaScript实现点击单元格改变背景色的方法 PHP输出缓冲控制Output Control系列函数详解 Ubuntu 8.04中使用fast-cgi搭建Apache2+PHP5环境 基于PHP创建Cookie数组的详解 asp.net验证码的简单制作 jquery $.each 和for怎么跳出循环终止本次循环 php大小写转换函数(strtolower、strtoupper)用法介绍 自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结 中文排版CSS心得 如何计算出当前日期属于定义时间段内的第几星期? jQuery实现Div拖动+键盘控制综合效果的方法 Vue实现底部侧边工具栏的实例代码 利用CSS3新特性创建透明边框三角 JavaScript实现跑马灯抽奖活动实例代码解析与优化(一) javascript jquery对form元素的常见操作详解 Angular实现的自定义模糊查询、排序及三角箭头标注功能示例 AJAX对服务器返回XML的处理方法 微信抢红包ASP.NET代码轻松实现 python 切片和range()用法说明 SQLServer查询某个时间段购买过商品的所有用户 Laravel 中获取上一篇和下一篇数据 JavaScript计算值然后把值嵌入到html中的实现方法 JS获取当前日期时间并定时刷新示例 CSS 定位之 z-index 问题分析 Adapter适配器模式在JavaScript设计模式编程中的运用分析 iOS实现启动引导页与指纹解锁的方法详解 原生Js实现简易烟花爆炸效果的方法 基于Python os模块常用命令介绍 浅谈.NET中加密和解密的实现方法分享 Python列表推导式的使用方法 python交互式图形编程实例(一) JavaScript对象的浅拷贝与深拷贝实例分析 SQL2000中的默认sa帐号的修改与删除方法 WampServer下安装多个版本的PHP、mysql、apache图文教程 oracle 声明游标(不具备字段)规则应用 php中使用cookie来保存用户登录信息的实现代码 python实现list元素按关键字相加减的方法示例 AngularJS 文件上传控件 ng-file-upload详解 JavaScript中exec函数用法实例分析 Zen Coding 简易快速的HTML编写 用javascript解决外部数据抓取中的乱码问题 setTimeout函数的神奇使用 MySql Error 1698(28000)问题的解决方法 基于jquery实现的类似百度搜索的输入框自动完成功能 Vue 父子组件、组件间通信 如何利用JConsole观察分析Java程序的运行并进行排错调优 vue.js 实现点击展开收起动画效果 jquery简单实现带渐显效果的选项卡菜单代码 在django中使用自定义标签实现分页功能 JQuery跳出each循环的方法 Spring MVC 中 HandlerInterceptorAdapter的使用 MSSQL 事务说明 Ajax请求内嵌套Ajax请求示例代码 异步调用webservice返回responseXML为空的问题解决方法 JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例 学习Bootstrap滚动监听 附调用方法 关于使用axios的一些心得技巧分享 php读取3389的脚本 JS排序方法(sort,bubble,select,insert)代码汇总 python实现随机漫步算法 js获取视频时长代码 python3 遍历删除特定后缀名文件的方法 linux系统中QQ的使用和配置 苹果MAC教程:spotlight搜索的意思说明 oracle查看字符集和修改字符集使用详解 JavaScript设计模式之构造函数模式实例教程 javaScript实现鼠标在文字上悬浮时弹出悬浮层效果 在windows平台上构建自己的PHP实现方法(仅适用于php5.2) Javascript 个人笔记(没有整理,很乱) 为VMware安装CentOS6.5后无法连接网络如何解决 VS2015 搭建Asp.net core开发环境的方法 通过Linux命令查看系统平均负载的方法 php实现文件下载简单示例(代码实现文件下载) 报名云栖大会成都峰会听阿里云首席安全研究员分享安全防护实践经验 jQuery前台数据获取实现代码 localResizeIMG先压缩后使用ajax无刷新上传(移动端) linux使用su切换用户提示 Authentication failure的解决方法 js实现表单Radio切换效果的方法 判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解 js canvas实现放大镜查看图片功能 如何取回已忘记的密码? 举例讲解CSS的子元素选择器用法 HTML+css制作简易进度条 ecshop实现针对不同支付方式对应不同价格折扣的方法 解析PHP中的file_get_contents获取远程页面乱码的问题 jQuery实现公告文字左右滚动的实例代码 使用python实现正则匹配检索远端FTP目录下的文件 Ajax跨域请求COOKIE无法带上的完美解决办法 ASP.NET MVC下自定义错误页和展示错误页的方式 Redis整合Spring结合使用缓存实例 使用jquery插件qrcode生成二维码 javascript瀑布流式图片懒加载实例解析与优化 node.js 核心http模块,起一个服务器,返回一个页面的实例 Bootstrap实现下拉菜单效果 javascript函数重载解决方案分享 PHP框架的选择及几款主流框架的性能基本评测 mssql存储过程表名和字段名为变量的实现方法 jQuery AJAX实现调用页面后台方法和web服务定义的方法分享 jQuery焦点图轮播效果实现方法 MySQL5绿色版windows下安装总结(推荐) php以fastCGI的方式运行时文件系统权限问题及解决方法 asp.net如何将DataSet转换成josn并输出 JS和Jquery获取和修改label的值的示例代码 jquery实现在页面加载完毕后获取图片高度或宽度 学习YUI.Ext第五日--做拖放Darg&Drop 微信小程序学习(4)-系统配置app.json详解 CentOS minimal 版安装图形界面的步骤分享,中文语言包. SQL Server中统计每个表行数的快速方法 Jquery实现跨域异步上传文件总结 ASP 使用三层架构 asp中使用类 Python利用itchat对微信中好友数据实现简单分析的方法 html+js实现简单的计算器代码(加减乘除) php获取用户浏览器版本的方法
jQuery带标题焦点图片滚动切换.zip 3d鼠标拖动图片360°旋转动画效果.zip PHPWind论坛 墨蓝风格.zip CSS3制作动态索引卡特效.zip 基于SSH框架的在线考试系统 ,使用bootstrap作为前端框架 微信小程序源码-【推荐】礼物商城 扁平化医疗科研机构官网模板.zip 【PHP源码】phpcms 3.0 Build20061207 简体中文版 UTF-8_phpcms_v3.0_utf8_free.zip HTML5时尚商务整站模板.zip Discuz! x2红色风格模板.zip jQuery头像裁剪插件cropbox.zip 绿色企业CSS网页模板.zip jquery+html5视频播放器插件.zip 基于spring-MVC的在线测试系统(客观题) 纯CSS3实现滑动开关按钮特效.zip jQuery站点后台登录表单代码.zip Bootstrap网站模板 岁月狂欢CSS3网站模板.zip 蓝色样式婚纱摄影模板.zip jQuery+CSS3进度条动画特效.zip flash+xml滚动新闻代码.zip Google Wear 来袭,首次破解可穿戴系统”通信机制” 航空学校网页模板.zip 高质量自定义滚动条特效代码.zip 黄色设计作品展示网页模板.zip 【ASP.NET源码】IlgharSite CMS(娱乐网站) v1.080 A 维文版_ilgharsite1-uyg.zip jquery手动自动图片切换.zip 特殊学校网站模板.zip jquery手机幻灯片展示.zip 全屏幻灯纸盒设计网站模板.zip jQuery点击图片上下滑动切换.zip html5 canvas雪花动画特效.zip jQuery旋钮插件jQuery knob.zip 【ASP.NET源码】网奇英文商城外贸系统 v5.2_freemodelv29.zip 【PHP源码】EasyTalk 迷你博客 v2.0 正式版_easytalk.zip SSH+Mysql整合开发Bookshop网上书店,适合毕业设计和学习使用 体育用品健身器材网站模板.zip Red5 增强 oflaDemo,自定义流媒体位置 【PHP源码】Zimplit CMS管理系统 v3.0_zimplitcms.zip 科技公司整站模板下载.zip jquery鼠标右键菜单多级导航代码.zip jQuery带节假日农历日历代码.zip 微信小程序 - 色狼.zip HTML5响应式手机企业网站模板1 android火焰效果 jquery仿腾讯云下拉导航.zip jQuery+CSS3点击动画弹出表单代码.zip 少儿教育培训网站模板.zip jquery简单的注册表单验证代码.zip jquery凹陷导航效果.zip 完整的10个JAVA项目源码,各种类型的都有 微信小程序源码-小程序贪吃蛇 程序开发CSS3模板.zip MD5keyBean DrupalCMS art4_blue.zip 微信小程序源码-宅男社区 jQuery火焰灯动画导航条.zip 小清新网上书店网页模板.zip 微信小程序源码-圆形菜单 【PHP源码】安全天使文章发布系统(Sarticle) v1.8_sarticlev1.8.zip jquery幻灯片tabs选项卡.zip 双鱼林struts+spring+hibernate图书管理系统源码 jquery图片拖动查看.zip 基于web的订餐管理系统 中英文滑动显现jQ导航.zip jQuery表格分页排序插件.zip Unify绿色响应式html5模板.zip jQuery+CSS3动画模态窗口.zip Discuz! x2.5蓝色小清新模板.zip 白色清爽美食餐厅网站模板.zip 微信小程序 - 新闻客户端.zip jQuery滚动切换选项卡特效插件.zip 【PHP源码】BeeCollector(小蜜蜂采集器)文章采集系统 V2.0324_beecollector.zip 休闲时刻户外网站模板.zip 带音乐HTML5圣诞网站模板.zip 管道疏通公司HTML5模板.zip jQuery鼠标右击显示菜单代码.zip html5触屏滑动侧边栏导航菜单特效.zip js银行卡号格式输入框.zip 纯CSS3多层云彩变换动画特效.zip js多组图片切换选项卡代码.zip Discuz! x2.5绿色小清新模板.zip jQuery带动画全屏图文切换.zip jQuery超棒动态表单验证效果.zip win8效果右侧网页浮动框代码.zip RecycleView之listView、gridView、瀑布流 jquery图片滑动伸缩.zip html5扑克翻牌消除小游戏代码.zip struts2_vip会员管理系统 json表格数据分页切换代码.zip jQuery大气定位按钮焦点图.zip 智优库存管理软件 免费下载 微信小程序源码-qq音乐播放器 jquery鼠标悬停上下显示遮罩标题与内容.zip html5疯狂打企鹅微信游戏.zip 微信小程序仿美团 jquery图片居中放大代码.zip css3鼠标悬浮放大效果.zip 自己写JSP博客 完整源代码 2014大朴网ecshop模板.zip jquery搜索垂直模拟select下拉效果.zip jquery隐藏滚动条.zip 2013便利100 ecshop模板.zip jquery仿wp动画悬浮标签云插件.zip jquery书架式图片展示特效.zip java web人力资源管理项目-采用SSH框架 js图片渐变轮换效果.zip 微信小程序源码-笑话 微信小程序源码-仿头条+后台 java 支付宝APP支付Demo jQuery自适应图片幻灯片特效.zip 人体图片瀑布流样式模板.zip 树莓派搭建小型气象站(可以直接运行) 蓝色网络应用html模板.zip jQuery半透明过渡切换手风琴.zip 创意设计公司模板下载.zip Facebook登录表单.zip android 中多任务断点续传下载 仿JD商城UI布局达到90% 粉色浪漫蛋糕网站模板.zip 纯css3制作喷火龙图片样式代码.zip spring mvc+mybatis+mysql+maven+bootstrap-table整合实现增删查改简单实例 微信小程序源码-城镇天气 轻量级高性能的CSS3动画库特效.zip java常用工具类iceroot开源类库 时尚太阳镜企业网站模板.zip 可切换主题炫彩网站模板.zip java学生学生信息界面 关键字球状旋转效果(JS).zip jquery图像标注式提示插件adhere.zip activity跳转动画,调用系统的闹钟,进程守护,跑马灯 CSS3实现3D螺旋动画特效.zip 微信小程序 - 电子优惠券领取小程序.zip 紫色开发者分享网站模板.zip Spring+SpringMVC+Mybatis+easyUI后台管理系统(RESTful API+redis) jquery鼠标悬停横向时间轴代码.zip 【PHP源码】小蜜蜂网络商情搜集系统(BNBC) V1.719_bnbc.zip jQuery点击文字滚动Scrollocue插件.zip js刮刮卡特效代码.zip 【PHP源码】数字中国全站系统 v1.3.1_dbchinav131.zip jquery动态禁用label标签.zip Android 购物车动画 wordpress经典蓝色HelloMetro主题.zip 物流管理系统完整源码,自己做的一个物流系统。 spring+mybatis+spring-mvc+maven 项目框架 Wordpress Bluebusiness.zip 纯CSS3实现眨眼动画特效.zip css3鼠标经过突出显示详情特效.zip Discuz! x2.0糗事百科模板.zip jQuery自适应焦点图.zip 粉红色浪漫婚纱企业模板.zip CSS3铅笔画风格的菜单特效.zip 【PHP源码】J_Space 人才网 v3.0_j_space30.zip jsp鲜花花店购物商城mysql jQuery百度新闻热搜词代码.zip html5手机端弹出侧边栏滑动菜单代码.zip 【PHP源码】PAILA! 大头贴娱乐平台 v0.1.7 RC1_paila17.zip java文本转语音实例 Adaptor jQuery幻灯片代码.zip jquery变焦放大效果.zip jQuery用户注册提示效果.zip 选项卡和图片滚动结合jquery代码.zip js网页生成二维码插件qrcode.zip 基于ssm的物流管理系统的实现 翻书式手机场景应用5.zip 网店设计CSS网页模板.zip 纯CSS3实现的手绘卡通按钮特效.zip jquery百度安全检测进度条.zip 微信小程序源码-qq音乐播放器 jquery+html5实现进度条加载特效.zip 邦立重工企业html橙色模板.zip jQuery响应式翻页效果.zip 时髦的时装类目网站模板.zip 【PHP源码】51shop 网上商城系统 v2.0_51shop.zip 企业信息交流系统(CICS) v1.0 Clean Zone Bootstrap 响应式管理系统模板 HTML5 3D小球弹跳动画.zip 蓝灰色搭配CSS3网站模板.zip jQuery多图3D旋转图片轮播.zip jQuery上传图片裁剪区域代码.zip jquery固定隐藏菜单.zip 炫黑相册集css网页模板.zip java web人力资源管理项目-采用SSH框架 【PHP源码】NetGou商城购物系统 v4.1.1_netgouv411.zip 网球运动HTML网站模板.zip 百度应用jQuery图文列表切换.zip 双屏网站上线倒计时模板.zip Json序列化与反序列化详解 非常大气功能全的网站后台模板AmaAdmin mongodb-php5.3.3-1.6.12 基于CSS3金属风格下拉菜单.zip jQuery无限循环手风琴.zip 农机播种企业网站模板.zip BJUI前端完整框架 实用的CSS3垂直手风琴列表代码.zip 牙科诊所行业网站模板.zip 香蕉树之恋(高仿植物大战僵尸防守类游戏) js文本复制与剪切插件clipboard.zip 仿爱淘宝分类伸缩jQuery导航.zip 蓝色高光背景企业模板.zip
举报X