addEventListener vs jquery.on 和 form.submit vs jquery.submit - 区别答案

【问题标题】：addEventListener vs jquery.on and form.submit vs jquery.submit - differenceaddEventListener vs jquery.on 和 form.submit vs jquery.submit - 区别
【发布时间】：2017-01-17 11:38:22
【问题描述】：

我有一段代码使用 jQuery on（例如 $(formElement).on('submit', callback)）注册回调，并且在应用程序的某处我试图在不使用 jQuery 的情况下使用 HTML 表单元素对象（例如 formElement.submit()）触发表单提交。但是，没有调用事件处理程序，但是当我将代码更改为 $(formElement).submit() 时，调用了回调。所以这是第一个问题，为什么？

所以我开始尝试不同的提交/注册技术，并且这段代码有效——回调被调用（$formElement 是长度为 1 的 jQuery 对象）：

$formElement.on('submit', function () {
    // do some stuff
});
$formElement.on('submit', function () {
    // do more stuff
});


setTimeout(function() {
    $formElement.submit();
}, 10000);

但是将其更改为：

setTimeout(function() {
    $formElement[0].submit();
}, 10000);

没有触发回调。更重要的是，当我将 $formElement.on 替换为 $formElement[0].addEventListener 时，无论我如何触发它们（jQuery提交或HTML表单提交）都不会调用回调

所以我可能缺少一些关于事件处理的基本知识。你能帮忙吗？

【问题讨论】：

表单是否有一个将id 或name 属性设置为submit 的元素？
不，名称是 name="createProfileForm"，在控制台中它呈现为 submit() { [native code] }
只有$formElement绑定到事件，而不是$formElement[0]
所以 jquery 提交事件和 DOM 提交事件不一样？例如，类似的代码，但点击事件的作品。
对，不一样。并且单击事件是预定义的，总是绑定到一个元素。我认为 jquery 可以处理 dom 事件。

标签： javascript jquery html dom-events

【解决方案1】：

我对 jquery 不是很熟悉，但是 .submit 似乎并没有真正提交表单，而是注册了一个监听器来提交事件，而 dom 元素上的原生 .submit 方法实际上提交了表单。

这是一种既可以监听手动提交又可以在 10 秒后触发提交的方法：

  const form = document.getElementById('someform');

  form.addEventListener('submit', e => {
    alert('form submitted');
  });

  setTimeout(() => {
    form.dispatchEvent(new Event('submit'));
    form.submit();
  }, 10000);

我正在手动分派提交事件，因为提交方法似乎提交表单但不触发事件。

【讨论】：