Deprecated Event Creation Mechanisms

Alex Reardon
InstructorAlex Reardon
Share this video with your friends

Social Share Links

Send Tweet
Published 3 years ago
Updated 3 years ago

There are some deprecated mechanisms for creating events that should be avoided.

Instructor: [0:00] There is a deprecated way to create events, and so if you lean on it, your code may stop working in browsers. We use document.createEvent() and we pass in the event type that we're trying to create. In this case, I'm just creating a standard event, and then we have a separate step to initialize the event.

[0:17] We call the event, which I've called deprecated.initEvent(), and you pass in the event type, and then whether the event will bubble, and then whether the event is cancelable.

[0:28] These two calls here are equivalent to creating an event with the new event constructor, passing in "Hello" as the event type, and then in our EventInit object, we're passing in bubbles: true, cancelable: false.

[0:42] We can use document.createEvent to create events of other types. Here, I'm creating a MouseEvent. The different event types have their own initializer functions. Here, I've got initMouseEvent(), and I'm passing in click.

[0:55] The initMouseEvent function can take up to 15 different arguments to control the properties about a MouseEvent. If I don't provide these properties, then the defaults will be used. We can come in here and say that the default value is being populated.

[1:10] Let's say I wanted to change the button value. What do I have to do? It turns out you have to do something terrible like this. Because initMouseEvent takes an ordered list of arguments rather than an object, you have to provide the values all the way up to the one you want.

[1:26] I'm passing in click because that's what I want and now I'm passing in undefined for all these values that they will default to their default values, going all the way down here. Cool. I can now pass in a different button value. Log that out to the console. I was able to change the button value.

[1:50] We can express the exact same creation of a MouseEvent using the MouseEvent constructor passing in click as the event type and then button 1. This little piece of code here is equivalent to all of this.

[2:03] If I log out my new event, I'll see that I was able to update the button property to 1.

egghead
egghead
~ 26 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today