Lesson 2: Events & Callbacks
First- what the heck is an event?
An event is something that happens in the browser. When something happens in the browser, a signal is fired. Events tend to be attached to a specific item in the browser, whether it be a single element, a group of elements, the document object itself, or even the entire browser.
Some common events are:
- click- the user clicks
- resize- the user resizes the document
- keydown, keypress, keyup- the user interacts with the keyboard
- mouseover- a mouse is moved over an element
- load- a resource has finished loading
What matters is detecting these events and handling what happens when they occur — Cassidy Williams
Okay, now that we’ve got that down, what is a callback? You know, I wish they would’ve come up with a better name than ‘callback.’ For some reason, it doesn’t stick in my mind very well, but I digress.
A callback is a function that is passed into another function and called after something occurs.
In plain English, the above says:
- We added an event listener to the window object
- When the page loads, the listener will wait for the
loadevent and, once that event has been triggered (a.k.a. once the page loads), it will call the function in the second parameter; and that function? Well, that’s the callback (a callback is an event handler).
In this video, Cassidy also covers how to add event listeners and callbacks to simple html buttons on a page, which is super helpful; in order to do this, we must:
- Select the button element (pink underline)
- Add an event listener, to that element (green underline)
- Name the event we’ll be waiting for (yellow underline)
- Write the resulting actions into a callback function (blue underline)- this is also called an anonymous function, since it doesn’t have a name (here’s an example of a named function:
function myFunction(param1, param2){}...where ‘myFunction' is the name)
Another useful nugget of information is that, if you want, you can also create custom events. Below is a screenshot that I will explain as clearly as I can.
In this example, 'timeEvent' is our custom event, and it’s calling a function called stateTime.
ThestateTime function is taking in an event object, e, which is the custom event. But wait, you just said timeEvent is the custom event, what gives? Well, the e represents the CustomEvent object (in the last section of code), which is being put INTO the stateTime function and that function is what will be executed once the page is done listening for timeEvent (on the first line).
*phew*
Okay, so now that we’ve got that all down, we have to make this code run; in order to do so, the body has to dispatch the event. We can dispatch the event by typing document.body.dispatchEvent(myEvent) into the console. You should get an alert like this:
And we’re done!
Next up, a lesson on AJAX!
