无论 JavaScript 中的表单 id 为何，用于提交表单的 EventListener

Question

有没有办法添加一个事件侦听器，该事件侦听器将在提交网页中的任何表单时运行？ 这需要在所有网站上运行，例如，在www.google.com 上，每当用户搜索某些内容时，事件侦听器都应该运行。

我没有使用任何 html 文件。 所以不能使用表单ID。

我是一名 Swift 开发人员，但在这种情况下需要使用 JavaScript。 所以在这里真的需要一些帮助。

注意：StackOverflow 上有一个类似的问题，但那是针对 Ajax 的。 我希望只使用 JavaScript。

更新：我需要一个事件侦听器，每当用户在任何搜索引擎网站（如 google、bing 等）上搜索某些内容时，该事件侦听器都会执行。当用户 1. 在搜索框中点击 Enter 时，事件侦听器应该运行。 2.点击搜索按钮。 3.点击或点击进入自动完成搜索预测。

截至目前，我可以使用以下代码实现 1 和 2：

document.body.addEventListener('keypress', function(e) {
  // check if the element is an `input` element and the key is `enter`
  if((e.target.nodeName === "INPUT") && e.key === 'Enter') {
    console.log('Enter pressed Input');
  }
});
document.body.addEventListener('click', function(e) {
  if(e.target.nodeName === "INPUT") {
    console.log('Clicked Input');
  }
});
document.body.addEventListener('keypress', function(e) {
  if(e.target.nodeName === "DIV" && e.key === 'Enter') {
    console.log('Enter pressed in Autocomplete');
  }
});
document.body.addEventListener('click', function(e) {
  if(e.target.nodeName === "LI") {
    console.log('Clicked Autocomplete');
  }
}); 

但是，我还无法实现目标 3。 我想也许如果我能够实现一个在提交表单时运行的事件侦听器，那么所有三个目标都将实现。 我不确定，因为我是 JavaScript 的新手。

我还需要在不使用任何表单 ID 的情况下执行此操作，因为相同的代码需要与多个表单兼容。

我希望这现在更清楚了。

Answer 1

那么你不需要监听按键，而是监听提交事件，使用事件委托，这是一个解决方案，请注意我们正在获取名称为"q"的输入值，因为大多数搜索引擎使用它作为搜索输入的名称：

 document.body.addEventListener("submit", function(e) { // prevent the form submitting e.preventDefault(); // clear the console from old messages console.clear(); // output the serached text console.log(e.target.querySelector("[name='q']").value); // after 3 seconds submit the form (just for demonstration) setTimeout(function() { e.target.submit(); }, 3000); });

 <form action="https://duckduckgo.com/"> <input type="text" name="q"> <input type="submit"> </form>