有没有比较便捷的方法，可以知道前端触发了什么 funcion？比如在一个网页中，我点击某个未知功能的按钮，触发了一连串 function，如何快捷地知道这些的 function 名字？
good1uck · 2020-01-16 02:21:19 +08:00 · 1809 次点击这是一个创建于 1805 天前的主题，其中的信息可能已经有所发展或是发生改变。
第 1 条附言 · 2020-01-16 04:27:16 +08:00
不仅局限于按钮触发的 function
第 2 条附言 · 2020-01-16 04:31:27 +08:00
因为最近被交接了一个项目，前任注释和文档很少.
 |
1
KasuganoSoras 2020-01-16 02:35:41 +08:00  2
浏览器控制台输入：
$("这里是元素选择器")[0].onclick 例如帖子的顶和踩按钮： $("#topic_638293_votes > a:nth-child(1)")[0].onclick 返回内容： function onclick(event) { upVoteTopic(638293); } |
 |
2
good1uck OP @KasuganoSoras 谢谢，如果不仅局限于按钮触发的 function 呢？
|
 |
3
moyupoi 2020-01-16 08:47:12 +08:00 via iPhone 1
调试工具有个事件选项，选上就行，每个都调用，比较烦就是了
|
 |
4
luchenwei9266 2020-01-16 09:47:25 +08:00 1
试一下给这个按钮加断点。触发断点后，然后在 Chrome 调试工具的 Sources 面板的右侧有个 Call Stack,可以看相关的调用栈信息。
|
 |
5
daguaochengtang 2020-01-16 10:16:32 +08:00 1
@KasuganoSoras 如果代码是用 addEventListener 添加的事件处理器，onclick 可能是 null 哦，简单点可以在当前页面控制台测试以下代码：
``` document.body.onclick // return null document.body.addEventListener('click', function(){}) // 添加了点击事件 document.body.onclick // return null 虽然添加了点击事件，但是 onclick 属性还是 null ``` |
 |
6
joe237 2020-01-16 10:21:20 +08:00 1
以 chrome 浏览器的 devtools 为例，打开 devtools，选择 elements 选项，找到你的元素，不限定于“按钮”，任何元素都成，左侧面板中有个 event listeners,里面包含了该对应元素上的所有事件，每个事件对应的方法都可以展开看详细内容
|
|
7
daguaochengtang 2020-01-16 10:27:58 +08:00 2
 |
|
8
daguaochengtang 2020-01-16 10:30:59 +08:00
接上图，保存为变量后 chrome 会把这个函数赋给一个变量，比如 temp1,你直接 temp1()，和点击感谢是一样的
``` ƒ onclick(event) { if (confirm('你确定要向本主题创建者发送谢意？')) { thankTopic(638293, '14539'); } } ``` |
 |
9
vanishcode 2020-01-20 23:07:38 +08:00
|
|
10
vanishcode 2020-01-20 23:09:49 +08:00
getEventListeners()这个方法是 native 的 cli 函数，代码里用不了（ puppeteer 可能能用），上文博客中的$._data 是 jq 的方法，具体你可以看它怎么实现的，或者使用 puppeteer 或者其他 headless 注入一个 jq。。
|
Select Language