我正在使用Chrome和我自己的网站
我从内部了解到:
1)我有一个表单,人们可以通过单击此橙色图像按钮进行注册:
2)我检查了一下,就这些:
<;img类=“img类”;formSend“;src=”s;images/botoninscribirse2.png“&燃气轮机
3)在源代码的顶部,有大量的脚本源代码。我知道按钮调用的是哪一个,因为我对它进行了编码:<;脚本src=";js/jquery2.js“;类型=";text/javascript“&燃气轮机</脚本>
4)在该文件中,您可以找到:$(";.formSend";)。单击(function(){…})这是由按钮触发的(执行相当复杂的表单验证和提交),而我想要的是能够在任何网站上使用chrome开发工具找到它
如何找出元素调用的位置
“侦听器”选项卡对我不起作用。然后我试着寻找点击事件的监听器,这对我来说似乎是一个安全的赌注,但是。。。那里没有jquery2.js(我也不知道代码是哪个文件,所以我会浪费时间检查所有这些…):
My$(“formSend”)。单击(函数(){…})</jquery2.js文件中的code>函数不存在
杰西解释了原因:
”;最后,函数没有直接绑定到click事件处理程序的原因是jQuery返回一个绑定的函数。jQuery的函数依次经过一些抽象层和检查,然后在其中的某个地方执行您的函数
正如你们中的一些人所建议的,我已经在下面的一个答案中收集了有效的方法
亚历山大·巴甫洛夫的答案最接近你想要的
由于jQuery的抽象和功能的广泛性,为了抓住事件的实质,必须跳出许多障碍。我已经设置了这个JSFIDLE来演示这项工作
一,。设置事件侦听器断点
你就差一点了
- 打开Chrome开发工具(F12),然后转到Sources选项卡
- 向下搜索到鼠标->单击
(单击以缩放)
二,。点击按钮
Chrome Dev工具将暂停脚本执行,并向您展示这一小型化代码的美丽纠结:
(单击可缩放)
三,。找到光荣的密码
现在,这里的诀窍是不要忘乎所以按下键,并密切关注屏幕
- 按F11键(单步执行),直到出现所需的源代码
- 源代码最终到达
- 在上面提供的JSFIDLE示例中,在到达所需的事件处理程序/函数之前,我必须按F11108次
- 根据用于绑定事件的jQuery(或框架库)的版本,您的里程可能会有所不同
- 只要投入足够的精力和时间,您就可以找到任何事件处理程序/函数
四,。解释
我没有确切的答案,也没有解释为什么jQuery会经历许多层的抽象——我只能说,这是因为它从执行代码的浏览器中抽象出了它的用法
这里是一个带有jQuery调试版本的JSFIDLE(即,未缩小)。当您在第一个(非缩小)断点上查看代码时,您可以看到代码正在处理许多事情:
/…剪贴。。。
if(!(eventHandle=elemData.handle)){
eventHandle=elemData.handle=function(e){
//放弃jQuery.event.trigger()的第二个事件,然后
//在页面卸载后调用事件时
返回jQuery的类型!==strundefined&;jQuery.event.triggered!==e.type?
jQuery.event.dispatch.apply(元素,参数):未定义;
};
}
//…剪断。。。
当“执行暂停且我逐行跳转时,”,我认为您在尝试时错过了它的原因是因为您可能使用了“跳过”功能,而不是介入。下面是一个解释差异的答案
最后,函数没有直接绑定到click事件处理程序的原因是jQuery返回一个绑定的函数。jQuery的函数依次经过一些抽象层和检查,然后在其中的某个地方执行函数