javascript - Chrome 中的 dispatchEvent，但 IE11 中没有

Question

我正在使用以下代码提交表单：

element.dispatchEvent(new Event("submit"));

检查器返回错误：

对象不支持此操作

这适用于 Chrome。

此命令的目的是在单击时使一个部门调用表单上的提交事件。

Jquery 不是一个选项

Answer 1

考虑到未来的变化，这是使其适用于 IE11 和其他浏览器的最佳方式。

var event;
if(typeof(Event) === 'function') {
    event = new Event('submit');
}else{
    event = document.createEvent('Event');
    event.initEvent('submit', true, true);
}

$el.dispatchEvent(event);

Answer 2

我刚刚遇到了同样的问题，但以下似乎在 IE11 中有效：

var event = document.createEvent("Event");
event.initEvent("submit", false, true); 
// args: string type, boolean bubbles, boolean cancelable
element.dispatchEvent(event);

Answer 3

最好使用 polyfil 来解决这个问题。（自定义事件填充）

# using yarn 
$ yarn add custom-event-polyfill

# using npm 
$ npm install --save custom-event-polyfill

然后在你的javascript中包含/要求它

import 'custom-event-polyfill';

https://www.npmjs.com/package/custom-event-polyfill

Answer 4

我组装了各种方法的零碎并使它起作用：

var customEvent = document.createEvent('HTMLEvents');
customEvent.initEvent('myCustomEvent', true, true);
document.dispatchEvent(customEvent);

老实说，这对我来说没有多大意义。它在文档上创建一个事件（似乎需要命名HTMLEvents），然后用另一个名称初始化该事件。如果有人可以更好地解释这一点，请在下面添加评论，以便将其合并到答案中。

在任何情况下，我都可以使用标准事件侦听器在 IE11（和现代浏览器）中侦听此自定义事件：

document.addEventListener('myCustomEvent', function(){
  console.log('Event received.');
});