Managing Your Events
Throughout your adventures in learning JavaScript you’ll eventually stumble upon the magical function called, ‘addEventListener.’ This function has an insane amount of power, and as far as my knowledge goes, it is the backbone of creating a web application. It may be tricky to know how to use this method to its highest potential. Advice that I can personally give is to use Bubbling. To explain what bubbling is; “The bubbling principle is simple. When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.”(https://javascript.info/bubbling-and-capturing) To put this in laymen's terms. Bubbling is like, having a dart board with a sensor over the entire board. Therefore, every time a dart hits the board the sensor goes off. But, for this instance the dart board only cares about whether what you hit was a bullseye. So it runs some logic and asks itself ‘was that spot the bullseye?’, if not do nothing. But if it is, then add points, throw some confetti and party, because hitting a bullseye is something to celebrate about. To put this in coding terms lets make an example:
const dartBoard = document.getElementById('dart-board')
darBoard.addEventListener('hit', eventHandler)What we did here was we grabbed the dartboard from our DOM, and then we assigned it to an event listener.
Quick segway, the first argument that an event listener takes is painstakingly long, here’s what I mean. I’m a big fan of ‘change’, which listens for any kind of change that happens to the specific listener (super helpful for dropdown selections.)
Any-who, the second argument that the event listener takes is the function that will be run if the dartboard got a ‘hit.’ In this case we are throwing it into an event handler (only because we are planning on giving this dartboard more functionality than just a bullseye hit.) The eventHandler function will look like this:
function eventHandler(e){
if (e.target.className === 'bullseye'){
console.log('Ten points for Gryffindor!')
} There’s a few things going on here. First we are putting in the argument of e (for event) and we are finding out what the target is (which should be the bullseye.) We already know the class name of the bullseye so we will use that in this instance. You don’t need to use class name though, there’s a plethora of different ways to check to see if the target is what you want it to be. I personally find using class names or id’s as the easiest way to make a conditional with. So, if what the target hits is a bullseye it will run the following line. The beauty of using eventHandlers is that you can keep stacking different events for the dart board. For example let’s say we wanted to start adding points, as well as make the other parts of the dart board actually do something. For example, our eventHandler will look something like this:
function eventHandler(e){if( e.target.className === 'bullseye'){
award50Points()} else if (e.target.className === 'bull'){
award25Points()} else if (e.target.className === 'triple-ring'){
scoreTimes3()} else if (e.target.className === 'double-ring'){
scoreTimes2()
}
What our eventHandler’s duty is essentially to direct traffic. It takes in the event and checks what specific part of the dart board was hit. If it’s anything that has been defined, then it will be passed off to a different function.
Lastly, eventHandlers can take optional parameters as well. A fun one that I stumbled upon was ‘once.’ The syntax would look like something like this:
likeBtn.addEventListener('click', eventHandler, {once: true})In this example, this can be super useful in an instance in which a user can like a post. It would be bananas to let the users like something a million times. Therefore, you can restrict the event to only run once. Neat!
