javascript - 如何找出对象的 onclick 事件正在调用什么 javascript 函数？

Question

如何找出对象的 onclick 事件正在调用什么 javascript 函数？更好的是，我可以找出该函数在哪个包含的 .js 文件中吗？

Answer 1

我为此使用 Chrome 的开发者工具：

选中该click框，然后单击页面上要为其查找处理程序的元素。如果您使用的是 jQuery（或类似的库），您可能必须先浏览他们的代码，然后才能使用您的代码。

Answer 2

你可以这样做

在 JsFiddle 上使用 Javascript演示

div1 = document.getElementById('div1');

alert(div1.getAttribute("onclick"));​

在 JsFiddle 上使用 jQuery演示

<div id="div1" onclick="myfun();" >​

alert($('#div1').attr('onclick'))​;

Answer 3

我使用这个可视事件脚本来执行此操作，该脚本巧妙地突出显示哪些事件由哪些元素上的哪些函数订阅。

要查找代码源，只需使用 FireBug 或类似的浏览器开发工具搜索函数名称即可。

Answer 4

您将无法找到调用 onclick 事件的文件，但myObject.onclick会为您提供被调用的函数。不，你不需要 jQuery。

至于获取函数的名称，这有点复杂。你可以尝试这样的事情，也许：

var myFunc = myObject.onclick, myFuncName = "";

for(prop in window) {
    if(window.hasOwnProperty(prop) && window[prop] === myFunc) {
        myFuncName = prop; // myFuncName is now the name of the function. This only works if you didn't assign an anonymous function to the click handler.
        break;
    }
}

但老实说，我认为这有点矫枉过正。

Answer 5

这取决于如何event连接。

如果你绑定到onclick没有像 jQuery 这样的东西，你可以这样做：

var obj = document.getElementById('elementId');
console.log(obj.onclick);

Answer 6

我有不同的方法。我重载 onclick 函数并在实际函数之前添加我的调试器。

这是元素

<div id="div1">​

将此 JavaScript 写入开发者控制台

var clickFn = $("#div1").click; 

$("#div1").click(function(){ 
    debugger; 
    clickFn(); 
});