javascript中查看元素事件函数的一些技巧

摘要： 在分析一些网页的时候，常常会发现点击某个按钮会触发某个动做，当页面比较复杂，包含的js文件又多，这时候要找到这段触发函数的代码写在哪里就比较困难。好比，在某个html页面中，发现以下一个按钮，点击后会使得页面元素有变化。

在分析一些网页的时候，常常会发现点击某个按钮会触发某个动做，当页面比较复杂，包含的js文件又多，这时候要找到这段触发函数的代码写在哪里就比较困难。好比，在某个html页面中，发现以下一个按钮，点击后会使得页面元素有变化。可是并未看到onclick事件，那说明该事件多是经过javascript中的addEventListener方法绑定的（IE不支持该方法，使用的是attachEvent，不理解为微软何非要和W3C标准对着干）。例以下面的代码：

1 2 3 4 5 6 7

<input type="button" value="输入" id="btn1" name="n_btn1"/><label id="lbl"></label><br /> <script type="text/javascript">             document.getElementById("btn1").addEventListener("click",                 function () {                     alert("OK");                 });   </script>

要看到btn1绑定的事件，能够经过chrome的事件监听实现。以下截图：

此外，能够经过命令，查看绑定的方法，在Chrome中的命令行方法，getEventListeners(object)得到，以下：

注意：getEventListeners方法是谷歌提供的供调试的命令行，并非标准的javascript函数，只能够在chrome中的控制台中运行，与之相似的命令行还有不少，能够参考：

https://developer.chrome.com/devtools/docs/commandline-api。

此外，在控制台的listener中，只能显示函数的第一行，若是你写的函数是多行的，那就须要把命令打全了：

getEventListeners(document.getElementById("btn1")).click[0].listener

console会把函数的所有都打印出来。

若是该段代码使用jquery绑定的，使用这种方法就会有点问题，好比，仍是上面的代码，可是绑定方式以下：

1 2 3

$(function () {         $("#btn1").click(function () { alert('OK2') });     });

经过jquery的click方法绑定了一个方法，结果发现listenerBody指向到了jquery的代码上去了，以下图：

这也正说明了，Jquery对于事件的绑定从新的定义了一套方法，因此此处看到的是Jquery的代码。

幸运的是，在jquery中，咱们可使用jQuery._data(element, "events")方法,关于这个方法的文档不多，官方文档在这里http://blog.jquery.com/2011/11/08/building-a-slimmer-jquery/，说起到该方法时一个内部方法，记录了全部元素的事件。Stackoverflow上有一个文章介绍了这个方法和Jquery.data的区别，地址http://stackoverflow.com/questions/7788353/whats-the-difference-between-jquery-data-and-jquery-data-underscore-data。

此处，咱们只须要知道这个方法能够用来实现咱们的目的——查看元素所绑定的事件。咱们只需在chrome的控制台里输入以下代码：

1	$._data($("#btn1")[0], 'events');

注意，该方法的参数是DOM对象，不是jquery对象。所以须要加一个[0]来转成DOM对象。具体以下图：

咱们在handler这个节点下，终于看到了该元素所绑定的事件了。

事实上，这个方法，能够写在js代码中，而且handler的值其实就是一个function，好比在代码中以下的写法：

1 2 3

var p = $._data($('#btn1')[0], 'events').click[0].handler; alert(typeof (p)); p();

能够看到弹出的类型就是p的类型就是function，而且能够直接调用p。

经过上面所说的方法，在分析复杂页面的时候，很容易找到事件的源头，跟踪代码，提升效率。