We’ll start with a simple event listener example. Most people know that adding an event listener is not a simple ordeal unless they’re planning on having their code work on a tiny subset of browsers. You have to test multiple methods in order to make sure they’re using the right one for the browser that’s currently running the code. In this code example we just add this feature detection into a function that we call upon to run this annoying code for us:
It’s that simple! I kinda wish all the code samples I have to write were this easy, but if that were true it wouldn’t be any fun and you wouldn’t read this site, would you? I didn’t think so. In light of that fact, I figured I’d show you something with a wee bit more complexity. Let’s just say that originally your code looked a little something like this:
Lame! You’re doing the exact same thing to each one of those elements! I think there’s something we can do to make this a little easier on our parts. Maybe a little something like this:
That code could actually save us a lot of time if we have a lot of elements that we want to style the same way.