javascript - 如何找出谁触发了提交事件？

Question

我遇到的情况是无法弄清楚谁在调用表单提交。

我有一个像下面这样的 dom。

<form method="POST" action="action.do">
<button onclick = "eventHandler()">Test</button>
</form>

每当我单击按钮时，我都会看到提交时遇到断点，并且无法从调用堆栈中找出任何内容。

需要帮助

Answer 1

一般来说，避免使用 onxyz-attribute-style 事件处理程序。但如果你这样做了，请让他们正确设置 this 并传入事件；如果您想在处理程序中使用 return false 来阻止事件的默认操作，您可能还需要包含 return:

<button onclick = "return eventHandler.call(this, event)">Test</button>
<!-- --------------^^^^^^--------------^^^^^^^^^^^^^^^^^             -->

(如果没有返回值，在现代浏览器上，您可以在事件对象上使用 preventDefault() 方法，而不是返回 false。)

在处理程序中，this 将引用元素(在本例中为 button)，第一个参数将是事件对象，其中包含其他有用的信息.

请注意，此处理程序不处理submit 事件。它处理提交按钮上的click 事件。 submit 是在表单上触发的事件，而不是按钮。

但是，一般来说，我建议使用现代事件处理，一旦按钮存在就 Hook 事件:

var btn = document.querySelector("selector-for-the-button");
btn.addEventListener("click", eventHandler, false);

这样，将使用正确的 this 调用 eventHandler 并传递事件对象。

注意:过时的浏览器IE8及更早版本没有addEventListener。过时的浏览器 IE9-IE10 有它，但在“兼容”模式下假装没有。 IE11 在“兼容”模式下同样会陷入困境。如果您需要支持其中任何一个，您可以使用 hookEvent 函数 in this answer .

或者当然，使用像 jQuery 这样的库，或者像 AngularJS 或 React 等框架，来为您处理这些跨浏览器问题。