CODEWITHSUNDEEP
javascriptdom-eventsinternet-explorer-11dispatchevent
user4014674
user4014674

Reputation:

dispatchEvent in Chrome but not in IE11

I am using the following code to submit to a form:

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

Inspector returns the error:

Object doesn't support this action

This works in Chrome.

The purpose of this command is to make a division call the submit event on a form when clicked.

Jquery is not an option

Upvotes: 68

Views: 53224

Answers (4)

Kohei Mikami
Kohei Mikami

Reputation: 2870

This is the best way to make it work for IE11 and other browsers with considering future changes.

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

$el.dispatchEvent(event);

Upvotes: 99

Sanath
Sanath

Reputation: 4886

It's best to use a polyfil to fix this. (custom-event-polyfill)

# using yarn 
$ yarn add custom-event-polyfill

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

then include/require it in your javascript

import 'custom-event-polyfill';

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

Upvotes: 14

Mike Wheaton
Mike Wheaton

Reputation: 502

I assembled bits and pieces of various approaches and got this to work:

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

To be honest, this doesn't make a lot of sense to me. It creates an event (naming it HTMLEvents seems to be required) on the document, then goes and initializes that event with another name. If anyone can explain this better please add a comment below so it can be incorporated into the answer.

In any case, I'm able to listen to this custom event in IE11 (and modern browsers) with a standard event listener:

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

Upvotes: 2

Taimo Kolsar
Taimo Kolsar

Reputation: 499

I just had the same problem, but the following seems to work in IE11:

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

Upvotes: 49

Related Questions