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

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

医你心事 于 2018-05-20 14:00:06 创建话题
(31)
(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官方微博
HTML5实现可缩放时钟代码 js input输入百分号保存数据库失败的解决方法 JS 实现导航栏悬停效果(续) JS日期加减,日期运算代码 使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享 setInterval()和setTimeout()的用法和区别示例介绍 ASP.NET MVC5网站开发之实现数据存储层功能(三) python利用正则表达式排除集合中字符的功能示例 PHP 数组和字符串互相转换实现方法 JavaScript 类的定义和引用 JavaScript高级培训 自定义对象 AngularJS 文件上传控件 ng-file-upload详解 织梦DEDECMS网站安全攻略之修改data目录名称方法步骤 学习Bootstrap组件之下拉菜单 前端分页功能的实现以及原理(jQuery) javascript数组去重的方法汇总 找到一款不错的基于AJAX留言板源码(PHP版、ASP版)提供下载了 Jquery中LigerUi的弹出编辑框(实现方法) dedecms模板标签如何做判断示例代码 PHP 常用时间函数资料整理 iview table高度动态设置方法 在JavaScript中监听IME键盘输入事件 深入解析php中的foreach问题 Vue中建立全局引用或者全局命令的方法 用Nginx反向代理Node.js的方法 浅谈php安全性需要注意的几点事项 微信小程序 生命周期详解 Angular实现响应式表单 Yii 2中的load()和save()示例详解 Apache服务器优化方法小结 详解如何使用DockerHub官方的MySQL镜像 PHP生成随机密码方法汇总 javascript中replace使用方法总结 java 线程的生命周期详解 基于jQuery实现二级下拉菜单效果 完美解决IE低版本不支持call与apply的问题 JavaScript实现动态添加Form表单元素的方法示例 帝国CMS自动截取简介出现乱码的解决方法 php生成高清缩略图实例详解 异步JS框架的作用以及实现方法 jQuery实现标签子元素的添加和赋值方法 jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路 基于docker安装tensorflow的完整步骤 ES6学习之变量的两种命名方法示例 利用Python-iGraph如何绘制贴吧_微博的好友关系图详解 Bootstrap富文本组件wysiwyg数据保存到mysql的方法 域名投资半年后总结的域名投资心得 IE8的JavaScript点击事件(onclick)不兼容的解决方法 HTML基础笔记(推荐) vue2手机APP项目添加开屏广告或者闪屏广告 javascript框架设计之种子模块 多个checkbox被选中时如何判断是否有自己想要的 linux、unix下快速清空文件的方法 JS组件中bootstrap multiselect两大组件较量 jQuery第三课 修改元素属性及内容的代码 正则表达式中不区分大小写的写法 javascript 动态脚本添加的简单方法 EasyUI中实现form表单提交的示例分享 微信小程序 常用工具类详解及实例 python下如何查询CS反恐精英的服务器信息 在SQLServer上查看SQL语句的执行时间的方法 jquery与php结合实现AJAX长轮询(LongPoll) javascript实现3D切换焦点图 javascript表单正则应用 js创建jsonArray传输至后台及后台全面解析 javascript制作2048游戏 ReplaceTrim 函数之asp实现过滤掉字符中所有的tab和回车和换行的代码 ASP.NET向Javascript传递变量两种实现方法 一个iOS上的秒表小应用的实现方法分享 js实现延时加载Flash的方法 javascript中类的定义方式详解(四种方式) 安装使用apt-spy来为Ubuntu配置最快的软件源 简单总结JavaScript中的String字符串类型 关于查看MSSQL 数据库 用户每个表 占用的空间大小 多选列表框动态添加,移动,删除,全选等操作的简单实例 JavaScript的parseInt 进制问题 详解javascript立即执行函数表达式IIFE CentOS上安装Node.js和mongodb笔记 AJAX级联下拉框的简单实现案例 单击按钮显示隐藏子菜单经典案例 详解正则表达式表单验证实例 30多个最具收藏实用价值的网站 jQuery之动画效果大全 js正则表达式之input属性($_)RegExp对象属性介绍 jquery中push()的用法(数组添加元素) Android中NestedScrolling滑动机制详解 asp数据库连接rs('user.id') linux下查看端口是否被占用以及查看所有端口【推荐】 编写通用的asp防注入程序 深入理解JavaScript系列(9) 根本没有“JSON对象”这回事! jQuery中ajax的使用与缓存问题的解决方法 python解决方案:WindowsError [Error 2] Jquery 动态循环输出表格具体方法 原来ASP和PHP都是可以删除自身的 Ruby中钩子方法的运用实例解析 Css3圆角边框制作代码 Python实现将SQLite中的数据直接输出为CVS的方法示例 PHP实现网站访问量计数器 在CMD命令行中运行python脚本的方法 日常收集整理正则表达式验证大全 Ajax同步和异步问题浅析及解决方法 angular过滤器实现排序功能 php强制下载文件函数 php生成略缩图代码 sqlserver建立新用户及关联数据库教程 浅谈七种常见的Hadoop和Spark项目案例 jQuery查找节点方法完整实例 PHP+JQUERY操作JSON实例 实现点击下箭头变上箭头来回切换的两种方法【推荐】 借助node实战JSONP跨域实例 AngularJs Using $location详解及示例代码 一个实用的JSP分页代码 javascript实现页面内关键词高亮显示代码 wordpress安装过程中遇到中文乱码的处理方法 深入理解Swift中的变量与常量 Yosemite 10.10安装盘 U盘制作教程 vue.js表格分页示例 php获取服务器端mac和客户端mac的地址支持WIN_LINUX JS取request值以及自动执行使用示例 javascript数组遍历的方法实例分析 js控制一个按钮是否可点击(可使用)disabled的实例 Android源码中final关键字的用法及final,finally,finalize的区别 js点击任意区域弹出层消失实现代码 win2008 php运行环境搭建图文教程 javascript每日必学之继承 JS结合bootstrap实现基本的增删改查功能 js实现自动图片轮播代码 在苹果电脑Mac上安装 Windows 10 图文教程 js鼠标点击图片切换效果实现代码 CentOS下RPM方式安装MySQL5.6教程 Android开发实现仿京东商品搜索选项卡弹窗功能 php适配器模式介绍 centos下嵌套创建文件夹讲解 PHP判断变量是否为0的方法 jquery ajaxSubmit 异步提交的简单实现 jsp页面中EL表达式被当成字符串处理不显示值问题的解决方法 easyui Droppable组件实现放置特效 Centos6.7怎么开启sshd服务? JavaScript异步加载浅析 教女朋友学Python3(二)简单的输入输出及内置函数查看 原创 Java中比较运算符compareTo()、equals()与==的区别及应用总结 asp.net 大文件上传控件 cookie中的path与domain属性详解 在vue项目中使用md5加密的方法 php array_walk_recursive 使用自定的函数处理数组中的每一个元素 php redis实现文章发布系统(用户投票系统) CentOS 7系统下SELinux阻止MongoDB启动的问题详解 详解 MapperScannerConfigurer之sqlSessionFactory注入方式 JS实现的省份级联实例代码 MS SQL Server获取十二个月份的英文缩写 对JavaScript的全文搜索实现相关度评分的功能的方法 jQuery源码解读之removeAttr()方法分析 IPC$ Password Crack BAT JavaScript子窗口调用父窗口变量和函数的方法 Flex 基于数据源的Menu Tree实现代码 JavaScript定时显示广告代码分享 基于NodeJS的前后端分离的思考与实践(一)全栈式开发 JavaScript事件用法浅析 p5.js入门教程之平滑过渡(Easing) javascript实现随时变化着的背景颜色 强制SQL Server执行计划使用并行提升在复杂查询语句下的性能 最详细的ASP.NET微信JS-SDK支付代码 JavaScript动态改变div属性的实现方法 JS实现在状态栏显示打字效果完整实例 MySQL数据库的一次死锁实例分析 Ruby编程中的语法使用风格推荐 ajax 三种实现方法实例代码 jQuery实现渐变下拉菜单的简单方法 js有关元素内容操作小结 Dedecms提示信息及提示内容的修改方法 javascript过滤数组重复元素的实现方法 微信小程序 wxapp内容组件 text详细介绍 PHP串行化与反串行化实例分析 asp.net mvc 实现文件上传带进度条的思路与方法 Angularjs中使用指令绑定点击事件的方法 button和input type=button的区别及注意事项 jQuery实现移动端滑块拖动选择数字效果 跟老齐学Python之字典,你还记得吗? bootstrap datetimepicker实现秒钟选择下拉框 axios基本入门用法教程 sqlserver获取各种形式的时间 CSS中position属性之fixed实现div居中 php+mysql不用递归实现的无限级分类实例(非递归) php mysql procedure实现获取多个结果集的方法【基于thinkPHP】 python爬虫入门教程--正则表达式完全指南(五) jquery实现div拖拽宽度示例代码 微信小程序开发之实现自定义Toast弹框 Ajax校验是否重复的实现代码 json 实例详细说明教程 javascript常见数字进制转换实例分析 jsp中如何实现按下回车键自动提交表单 ASP 处理JSON数据的实现代码 ASP.NET中利用WebClient上传图片到远程服务的方法 Javascript实现获取及设置光标位置的方法 js动态改变select选择变更option的index值示例 jquery选择器的选择使用及性能介绍 mysql use命令选择数据库详解 在Python 3中实现类型检查器的简单方法 使用find命令查找Linux中的隐藏文件的方法 由于Nginx配置文件问题导致打不开网站unknown directive的解决 vue插件实现v-model功能
jQuery进度条插件circleChart.js.zip 【ASP.NET源码】达达文档管理系统_dadadocument.zip 【PHP源码】创佳PHP站内搜索_chjia.zip jQuery鼠标拖动图片摇晃特效.zip 唯品会jQuery授权书展示幻灯片.zip 互联网科技公司官网模板.zip 嫩模网络直播网站模板下载.zip jquery鼠标悬停变暗突出显示特效.zip jQuery马赛克图片还原动画特效.zip jQuery jBox弹出层插件.zip 分享网络收集100个常用的jquery特效和插件 高仿微信语音录制 【PHP源码】DedeCms 5.3.1 正式版 GBK Build 090606_dedecmsv53-gbk-final-codepub.zip jQuery 3D图片旋转切换特效.zip jQuery带动画效果投票特效.zip jquery+css3幻灯片插件Bootslider.zip 【ASP.NET源码】X2Blog v4.0_x2blog40.zip 【ASP.NET源码】ASP.NET个人网站微软官方实例_personalwebsite.zip jQuery微信开放平台注册表单.zip jQuery确认对话框窗口弹窗插件.zip jQuery图片选项卡商品轮播代码.zip 精美大气扁平商务公司模板.zip Discuz! x2.5夏日风格模板.zip 【PHP源码】渝海URL编码转换工具 v1.1_yh_url_encode.zip 单页响应式美食网站模板.zip 梦幻设计html网页模板.zip 物流管理系统完整源码,自己做的一个物流系统。 【ASP.NET源码】一个产品管理系统 v2.0_codematic.zip 自定义颜色渐变的仪表盘 jquery用户输入表单验证.zip CSS3动画暗角按钮.zip 漂亮的jQuery橙色进度条插件.zip 商务合作静态网页模板.zip 外贸电子商务网站模板.zip 微信小程序源码-盛世华安 云湖天都模板PSD.zip jQuery鼠标滑过图文切换.zip jQuery轻量级提示框弹出层.zip css3实现动画按钮.zip 静心打坐健身网站模板.zip jQuery右侧固定层导航锚点定位代码.zip ecshop婚纱服装宽屏模板.zip Html5+Css3浅蓝色风格模板.zip 复古机车主题css模板.zip jQuery发票使用引导.zip jQuery自定义单选按钮复选框代码.zip 大卡车运输公司网站模板.zip js列表图片拖拽排序代码.zip wp美化增强版persona主题.zip html5制作3D拳击游戏源码下载.zip 微信小程序 - 相册;处理用户信息.zip js科学计算器.zip 当当网系统模板 【PHP源码】橡胶贸易友邻b2b第五版 v2.2_xjyl.zip 非洲贫困儿童公益模板下载.zip 【PHP源码】PHP文本交换链(Text Link Exchange)_link.zip 微信小程序 - 小程序版2048.zip css3分页导航.zip 微信小程序源码-掘金首页信息流 android串口设置工具源码 HTML5仿超级玛丽小游戏源码下载.zip jQuery分类选择座椅产品展示代码.zip 带搜索幻灯片HTML模板.zip Spring MVC 整合Mybatis详解,SSM框架的配置搭建,涉及Mybatis一对多的插入和查询,同时也涉及到一些简单的文件上传和下载 Ctrl+Enter键按钮提交表单代码.zip HTML5响应式手机企业网站模板 jQuery多媒体时间轴插件.zip jQ斜角渐变图片列表.zip 虚拟主机产品网站模板.zip 微信小程序源码-吉林宝商城 jquery旋转banner导航特效.zip jQuery点击选择购买月份年份代码.zip 【ASP.NET源码】XproerBBS v3.0.107 (含源码)_xproerbbs.zip 微信小程序源码-淘口令优惠券 【PHP源码】SOCKS代理小偷完整版_socks.zip 微信小程序源码-自媒体商城 Jave Swing Tab页签窗体,界面漂亮,毕业设计案例 jQuery问卷调查表单编辑代码.zip 快乐游乐园HTML5网页模板.zip jQuery鼠标点击图片滑动切换特效.zip 一款超棒的bootstrap管理风格的模板 jQuery垂直选项卡点击显示内容.zip 小工具CSS网页模板.zip 品牌钻戒首饰官网网站模板.zip 电子商务百货公司整站模板.zip jquery黑色横向二级导航.zip spring整合redis(spring模板+连接池+json序列化+cluster集群) 五格子蓝色DiscuzX2.5模板.zip 尚硅谷 Spring4 视频教程 【ASP.NET源码】魔法映像企业网站管理系统_mofayingxiang.zip 游戏机企业网站模板.zip html5仿微信支付输入金额代码.zip 【PHP源码】WEB代理聚合 v1.10_gom6_proxy-1.1.zip 宽屏婚恋交友企业网站模板.zip 纯CSS3滑动手风琴菜单代码.zip 【ASP.NET源码】友间别墅整站程序_ujbc.zip 【PHP源码】CMSware v2..85 GBK简体免费版(php4)_cmsware_free_2_8_5_20071203_php4_gbk.zip 探索发现html5网站模板.zip 【PHP源码】iProber v0.024修正版_iprober.zip jQuery数字滚动不断递增代码.zip 基于百度BAE搭建图床〔用于图片外链〕.zip css3荷花开放效果.zip 【ASP.NET源码】掘客Digg新闻发掘系统源码_digg2005.zip jQuery多功能网站幻灯片.zip 【ASP.NET源码】UrlRewriter .NET v2.0 RC1 (For .Net2.0) 问沫工作室优化版_urlrewriter.net2.0_wm.zip jQuery实用幻灯片特效代码.zip jQuery自适应图片大小.zip 在线教育机构HTML5模板.zip 6宫格自动轮换jquery幻灯片.zip 微信小程序 - 掘金首页信息流.zip jQuery手机移动端模态对话框插件.zip 代码+jar包+环境 北雨影音系统 v1.0.1 【PHP源码】视频建站系统Pocle 2.6 繁体 UTF-8_pocle_utf-8_tc.zip css3 3D下拉菜单.zip spring security demo 简洁大气网站模板免费下载.zip jQuery+CSS3实现3D全屏图片切换动画.zip jQuery图像缩放工具插件Zoomer.zip jQuery点击弹出订阅窗口代码.zip 大气餐馆美食网站模板.zip 【ASP.NET源码】谷秋精品课程软件课程版 v2.7_guqiu27.zip 高端休闲会所网站模板.zip jQuery+CSS3进度条动画特效.zip 食谱烹饪html网站模板.zip jQuery点击动画增加积分数量.zip JAVA公共资源模块的设计与开发(源代码+论文) jQuery左侧手风琴菜单代码.zip jQuery鼠标滑过图片3D显示文字特效.zip 【PHP源码】争乐在线ZY music! v1.1.1_zymusic.zip 跑步app官网网站模板.zip 灰色网页CSS网页模板.zip 【ASP.NET源码】无痕留言系统_whbook.zip 嫩模网络直播网站模板下载.zip 临沂大学javaweb应用程序期末上机试题和答案 企业人力资源管理系统 蓝色博客div+css模板下载.zip 仿国外Prometheushtml5手机网站模板.zip flash相片翻页展示效果.zip 微信小程序源码-悦读神器 微信小程序源码-阴阳师小程序-式神猎手(含后端及api解决方案) jQuery经典扫雷游戏源码下载.zip 在线银行储蓄业务网页模板.zip jQuery弹出层弹出关闭代码.zip 商务画廊CSS网页模板.zip jquery简单二级下拉菜单.zip js+Flash书角广告代码.zip 【ASP.NET源码】CK留言本(C#版)_guestbook.zip 超漂亮的jquery做的列表,固定表头、表格、刷新、排序 jQuery点击文字滚动Scrollocue插件.zip SSM个人博客项目实战(SSM+EasyUI) spring3+hibernate4配置声明式事务管理(annotation方式) jQuery+CSS3实现动画滑块幻灯片.zip windows RedisClient redis客户端 原生js模拟重力感应实现弹跳用户登录特效 基于案例学习数据挖掘 共9周视频教程 360新闻图文混排js焦点图.zip 基于SSH购物系统源代码 spring hibernate 整合例子 jquery椭圆形相册旋转.zip Java网络编程多线程断点下载带界面选择文件夹进度条 html5+css3下拉菜单.zip 微信小程序源码-盛世华安 仿QQ5.0侧栏源码 Music音乐演唱网站模板.zip 30秒才能点击跳转页面代码.zip CSS3墓穴爬出来僵尸动画特效.zip 服务器运维公司网站模板.zip 微信小程序源码-字精简版 html5单选框表单提交代码.zip 微信小程序 - 金盆洗脚城;node后端.zip springmvc入门实例 SSH框架源代码(最简洁最干净的代码)注解方式 蓝色样式婚纱摄影模板.zip HTML5手机身份证上传表单提交代码.zip jQuery百叶窗效果插件blindify.zip 自然旅游景点介绍网站模板.zip 紫色夜场俱乐部html5模板.zip jquery多功能响应式相册插件Strip.zip jQuery三屏同时滚动轮播切换.zip HTML5 SVG预览图变形切换幻灯片特效.zip 微信小程序 - weapp-360che-master.zip jQuery悬停动画HoverEx插件.zip 暗绿色医院企业模板.zip js符号砸到文字变大动画特效.zip HTML5 SVG表单浮动标签特效.zip 农业水果蔬菜种植网页模板.zip jQuery+CSS3催眠怀表摇摆动画特效.zip 微信小程序源码-口碑外卖点餐 登陆页面html天蓝色模板.zip jQ+CSS3页面滚动内容元素动画特效.zip S2SH框架开发的简单demo实例 纯CSS3实现动画开关按钮特效.zip 橙色的政府类网站模板html源码.zip Android动画合集大全(上百种动画) jQuery+CSS3内容变换幻灯片.zip 微信小程序源码-生活服务网 jQuery响应式垂直导航.zip jq+css3下拉滑动选项卡.zip jQuery页面预加载指示器特效.zip
举报X