Here it is, early March and I’ve been waking up with Christmas songs in my head. I’m not sure if it’s because Colorado just had five feet of snow last weekend and is expecting more this week or, the fact that I just really enjoy these songs. I know, some are pretty cringe, but hey, when you wake up singing ‘Let It Snow’ or ‘Frosty the Snowman’, how can you have a bad day?
When working with JavaScript, you definitely don’t want to be in a bad mood. Continuing from a previous blog post, I’d like to talk about Events in JavaScript and how to handle them… haha.
As you already know, JavaScript is used to make our pages more interactive. To make that possible, there is a plethora of Event Types that one can use. A few of these types would be, UI Events, Keyboard Events, Mouse Events, Form Events and many more. An example of a Keyboard Event is keypress. So when a user presses a key, an event will fire and trigger a function where you decide what happens next. Or a Form Event like submit, where a form completed by the user submits, likely sending that completed information to a database or adding a user to an email list. You can see how the code for JavaScript Events tends to go hand in hand with its action.
When an event occurs (a key is pressed or a form is submitted), it is correct to say the event has “fired” or been “raised”. Once an event is fired it will trigger a function or a script.
There are three steps involved in the process of triggering a JavaScript event and together they are known as “event handling”.
STEP ONE
Find the html node that you want to trigger your function/script. So if you’re looking for an event to occur when a user clicks on a button, find the DOM node for that button element.
STEP TWO
Figure out what event will trigger your response. Like previously mentioned, this will be an event type like keypress, mouseover etc.
STEP THREE
Lay out the code that you want to run when that event triggers.
Let’s take a look at this in action. Here is a webpage with a simple button, “Click Me. When pressed the button should change colors.
