You won’t believe how many tutorials and examples by people who are really smart have this.
Then next way to add a click event is to use something like elem.onclick. Again, there’s nothing really wrong with doing it this way, but you can run into a problem. Take a look at this:
With that code, when you click on the box, it’s background color should change to blue and it should get a 5 pixel thick border around it. But we only get the border. I know if I really wanted this to work, I should only have one onclick event, but I want to use this example to show you the problem. Let’s say in your code, after the user performs some action, you want to add another event handler onto an element but still have the original event handler on it. If you try to add that with another onclick event, it will cancel out the original event you had. If you’re building a JS heavy site or a web app, this could definitely become a problem.
The best method to use is addEventListener, which works in every browser except Internet Explorer 8 and lower, but those support an IE only version called attachEvent and you can write a few lines of code and so it will work in all browsers. Why is addEventListener the best way to go? Take a look at this example:
The first thing you’ll notice is, unlike with onclick, we are able to add more than one event listener to one element. We’re also able to use removeEventListener so you can remove the listener after the click so that you don’t have to worry about a user clicking on something an extra time and causing an error in a program. addEventListener gives you far more control than the other two options.
I’m actually really surprised at how often I see experienced programmers using the inline version, especially onload in the body tag. And I’ll be honest, no matter how experienced you are, if I see you using that or something similar in your code, I wonder if the rest of your code is up to date. Use addEventListener, it gives you the most control and it works in every modern browser.