Chrome 查看元素的事件绑定

在分析一些网页的时候,经常会发现点击某个按钮会触发某个动作,当页面比较复杂,包含的js文件又多,这时候要找到这段触发函数的代码写在哪里就比较困难。

比如,在某个html页面中,发现如下一个按钮,点击后会使得页面元素有变化,但是并未看到onclick事件,那说明该事件可能是通过JS中的addEventListener()方法绑定的。例如下面的代码:

<input type="button" value="输入" id="clickBtn" />
<script type="text/javascript">
document.getElementById("clickBtn").addEventListener("click", function () {
    alert("click event");
});
</script>

我们可以通过Chrome的调试工具tab中的Elements查看该元素绑定的事件。如下:

同时,也可以通过命令来查看绑定的方法,在Chrome中的命令行方法,getEventListeners(object)获得,通过如下方法:

getEventListeners(document.getElementById('clickBtn'));

上面的方式通过原生获取元素id的方式很简单但是不通用,更加通用的方式是:

  1. Chrome的调试工具tab中的Elements选中目标元素。

  2. Chrome控制台输入getEventListeners(node),比如查看选中元素的事件:getEventListeners($0)

FireBug 查看元素的事件绑定

使用FireFox原声的调试工具查看事件就相对比较简单,打开调试工具,在“查看器”tab界面下,找到要查看的元素,右侧会有一个小icon写着ev,点击即可查看相应的绑定事件。

获取 jQuery 的绑定事件相关方法

$._data($('#clickBtn').get(0));

或者使用Chrome的引用的形式

  1. Chrome的调试工具tab中的Elements选中目标元素。

  2. Chrome控制台输入

$._data($0);

使用Chrome插件查看页面的事件

推荐插件Visual Event,请自行到google开发者中心搜索安装。

软件用法是,点击加载完页面后,点击“小眼睛图标”,稍等片刻即可看到页面的事件。


最后编辑: 于 8个月前

评论列表(0)

    暂无评论