Input event for dropdown list?

JavaScript
1

Recently, I looked at some code that used an input event for a select element listener. And since I would have used a change event for that, I thought, “How can this work?” But it did. And MDN has this to say:

The input event fires when the value of an <input>, <select>, or <textarea> element has been changed as a direct result of a user action

Surprise!

Another lightbulb moment was learning that window.onload() is less performant than a listener using DOMContentLoaded because the latter does not wait for images, frames, and async scripts. MDN says:

It is a common mistake to use load where DOMContentLoaded would be more appropriate.

Notice I didn’t say anything about waiting for stylesheets. That’s because there’s a gotcha. If there are deferred scripts like <script type="module">, DOMContentLoaded waits for those to download and execute, and deferred scripts wait for the stylesheets to load! (BTW, Copilot missed this bit even using this MDN resource)

Anyway, just wanted to share. I’m always learning something new here. How cool is that?

1 Like