如何找到某个HTML元素所绑定的事件

如何找到某个HTML元素所绑定的事件

一、使用firefox调试

我们可以使用firefox的debug工具，找到指定元素，然后查看事件面板

二、使用chrome调试

在要检查的元素上单击右键选择查看元素，然后，右边的面板中会显示style标签，切换到EventListenrs标签，可以看到相关的事件绑定信息。点击最右边的文件名称还可以跳转到事件定义代码在脚本文件中的位置。

三、使用 Chrome Web Store 中 Visual Event 检查事件绑定信息

上面的两种方法，当我们定位定义事件的代码位置时，如果我们使用了JS库（比如jquery）的话调试工作又会变得复杂，程序往往会把我们引导到jquery库中，这样的话仍然是不方便找到在哪个文件的那个行中addEventListener了事件。Visual Event 工具插件可以查看

安装完 Visual Event 后，工具条上会有 Visual Event 的图标。然后打开我们要调试的页面，在工具栏上点击他那个火眼金睛一样的眼睛图标，网页上所有绑定了事件的 HTML 元素都会由一个半透明的蓝色遮罩层覆盖，鼠标移动到相应的元素上即可看到事件绑定信息。