专栏首页Web 开发使用jQuery.data()查看元素上绑定的事件

使用jQuery.data()查看元素上绑定的事件

最近遇到一个诡异的问题,发现我添加在一个HTMLElement片段上面的事件绑定,会在后续的流程中,无故丢失了。但是,我不知道它是什么时候丢失的。

所以我需要要一步步逼近定位到问题。

最先想到的是浏览器面板上面的,可以选中元素,看元素上面的事件绑定。

但浏览器上面看到的是结果量,也就是看到的是已经丢失了事件的元素,但我还是不知道什么时候丢失的。

估一路断点,观察、回溯调用栈(Sources面板右侧的Call Stack)。

然后问题来了。

我可以断点取到每个阶段的HTMLElement元素的状态,但是,这个时候,我却找不到观察其事件绑定情况的方法。

谷歌好久,发现JS原生是没法查看事件绑定情况的。

还好,我们都是用的jQuery,用的$.on()。

而jQuery自身事件绑定,额外添加了一层事件数组。(也是这个原因,$.on()可以重复给一个元素的同一个事件绑定多个handler,而直接addEventListener则只能绑定一个,后面的会覆盖掉前面的)

扯了这么多,show me the code:

获取HTMElement元素上面的事件绑定

JavaScript

$(HTMLElement).data('events')

1

$(HTMLElement).data('events')

然后,就会返回这个元素上面绑定的所有事件。如下图

jQuery.data(‘events’)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS常用库解密-FastClick

    众所周知,移动端在处理点击事件的时候,会有300毫秒的延迟。恰恰是这300毫秒的延迟,会让人有一种卡顿的体验。

    libo1106
  • 第三方评论系统

    首先首页设计就让人眼前一亮,其次是友言提供的功能,社会化评论系统,正是做独立网站很需要的

    libo1106
  • 也来说说webpack

    在CLI模式中,第一个参数是入口文件,第二个参数是输出文件,并读取当前cwd目录下面的webpack.config.js配置,根据配置生成对应的bundle.j...

    libo1106
  • google跟踪代码管理器gtm无法给相同class元素绑定click事件埋点解决

    Google 跟踪代码管理器是一个跟踪代码管理系统 (TMS),可以帮助您快速轻松地更新网站或移动应用上的跟踪代码及相关代码段(统称为“代码”)。将一小段跟踪代...

    蓓蕾心晴
  • 深入学习 React 合成事件

    从上面的代码里我们不难看出我们想要做一个点击某一个按钮来展示一个模态框,并且在点击除了模态框区域以外的位置希望能够关闭这个模态框。 但是实际运行结果和我们所想的...

    Nealyang
  • Java HotSpot 执行引擎架构

    Java HotSpot™虚拟机实现(Java HotSpot™VM)是Sun Microsystems,Inc.的高性能Java平台虚拟机。Java HotS...

    gemron的空间
  • 关于risc-v启动部分思考

    risc-v的架构有着非常鲜明的特点,如果看过arm,aarch64,mips等架构的一些架构手册的基础知识,再看risc-v的芯片的架构设计,就会觉得非常有意...

    bigmagic
  • 使用CSV模块和Pandas在Python中读取和写入CSV文件

    CSV文件是一种纯文本文件,其使用特定的结构来排列表格数据。CSV是一种紧凑,简单且通用的数据交换通用格式。许多在线服务允许其用户将网站中的表格数据导出到CSV...

    用户7466307
  • 第十二章 路由通信(二)

    以上的命令设置路由,重启network服务或系统后即会失效,为了能够每次重启都能够自动写入路由信息,需要编写配置文件:

    晓天
  • 1075 链表元素分类 (25 分)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    韩旭051

扫码关注云+社区

领取腾讯云代金券