用于提交表单的事件监听器，而不管 JavaScript 中的表单 ID [英] EventListener for submit form irrespective of form id in JavaScript

问题描述

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

Is there any way to add an eventlistener that will run whenever any of the forms in the webpage gets submitted? This need to run on all the websites, for example, on www.google.com, whenever the user searches something, the eventlistener should run.

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

I am not using any html file. So it is not possible to use the form id.

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

I am a Swift developer but need to use JavaScript in this scenario. So really need some help here.

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

Note: There is a similar question on StackOverflow, but that is for Ajax. I am looking to use only JavaScript.

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

UPDATE: I need an eventlistener that will get executed whenever a user searches something on any search engine website, like google, bing, etc. The eventlistener should run when the users 1. hits enter on the search box. 2. clicks on the search button. 3. clicks on or hits enter on the autocomplete search predictions.

到目前为止，我可以使用以下代码实现 1 和 2:

as of now I am able to achieve 1 and 2 using the following code:

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 新手.

However, I am not able to achieve target 3 yet. I thought maybe if I was able to implement an eventlistener that would run whenever the form gets submitted, all the three targets will be achieved. I am not sure as I am new to JavaScript.

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

I also need to do it without using any form id as the same code needs to be compatible with multiple forms.

我希望现在更清楚了.

推荐答案

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

Well then you don't need to listen for the key press, instead listen for the submit event, using event delegation, here is a solution, note that we're getting the value of the input with the name "q" cause most of the search engines use it as a name for the search input:

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>

这篇关于用于提交表单的事件监听器，而不管 JavaScript 中的表单 ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！