Event Handling (the right way)

A Simple Web Page Events - Summary <input type="button" id="btnMyButton" value="Click Me!"> The web page looks like this: And the HTML looks like this: Pretty simple - just one button…

Our objective is to make something happen when the user clicks on the button. The “click” is the event that we’re waiting for. We need to run some code when the user clicks the button. The code that we run will be in a JavaScript function. We call this function the event handler. It will handle the click event for our button. To keep things simple, let’s place our JavaScript code in the same file with the HTML: … Events - Summary function HandleMyButtonsClick() { alert("Thanks for clicking me!"); } … This function is our event handler. It displays a simple alert. This function is our event handler. It displays a simple alert. But right now, it will NOT RUN. It needs to be “hooked up” to our button. We have to tell the function to run when the button gets clicked. Let’s do that now… But right now, it will NOT RUN. It needs to be “hooked up” to our button. We have to tell the function to run when the button gets clicked. Let’s do that now…

… var btnMyButton = document.getElementByID(“btnMyButton”); btnMyButton.onclick = HandleMyButtonsClick; function HandleMyButtonsClick() { alert("Thanks for clicking me!"); } … Hook Up the Event Handler Function to the Button Grab hold of the button object and assign it to a variable. This line of code says, “In the EVENTuality that btnMyButton gets clicked, call the HandleMyButtonsClick function.” Be sure that these 4 names all match up! Be sure that these 2 names match up!

… var btnMyButton = document.getElementByID(“btnMyButton”); btnMyButton.onclick = HandleMyButtonsClick; function HandleMyButtonsClick() { alert("Thanks for clicking me!"); } … Now let’s make the code more elegant by eliminating the variable, and using an anonymous function… document.getElementByID(“btnMyButton”).onclick = function() { alert("Thanks for clicking me!"); }; There’s no need to declare a variable to hold the object if you’re only going to refer to the object just once in your code. There’s no need to declare a variable to hold the object if you’re only going to refer to the object just once in your code. Anonymous functions are almost always the way to go when creating event handlers. Anonymous functions are almost always the way to go when creating event handlers.

Thanks for watching.