为什么我看不到 onclick 属性？

Question

当我探索 StackOverflow 的代码时，我得到：
我试图获得onclick事件处理程序。 有报道：

> $0.onclick
< null
> $0.parentElement.onclick
< null

但是$0.click()给了我一些结果（答案被赞成）。 StackOverflow 开发人员如何隐藏它以及如何在纯 JS 中手工制作它？

Answer 1

虽然.onclick属性是向元素添加点击事件侦听器的一种方法，但这不是唯一的方法。 另一种方法是通过.addEventListener() 。 通过 .addEventListener .addEventListener()将事件侦听器添加到元素时， onclick属性/属性不会更新为事件处理程序 function。如果您使用onclick="" ，则仅在元素上设置.onclick属性属性或者代码是否设置了属性elem.onclick = function() {...} ，现在这种情况并不常见。

Chrome 确实为您提供了一种在不同元素上查找事件处理程序的方法。 当你在你的开发者工具中时，你可以 select 你感兴趣的元素，点击右侧窗格中的“事件监听器”，找到你感兴趣的事件，在本例中是“点击”事件，然后寻找您的元素：

您的元素恰好有一个与之关联的事件，但情况可能并非总是如此。 正如对您的问题的评论所指出的那样，您有时会遇到特定元素上没有单击事件处理程序的情况，而是将其添加到该元素的父级。 在这种情况下，当您单击您的元素时，事件通过 DOM 传播/“冒泡”，最终通过单击事件侦听器到达您的父元素。 然后父级的事件处理程序可以看到最初单击的元素是什么，然后可以根据该元素执行一些操作。 这被称为事件委托，这也是为什么即使在开发工具中查找时您也可能无法始终找到与您的元素相关联的事件的原因之一。