Listen Up! To Clicks and Submit

Common Event Listeners in JavaScript

Are you in a coding bootcamp? Do you barely understand how an event listener works or even how to create one? I've got two that'll be incredibly useful for you when you're first starting off on your coding journey. But first, let's explain what these event listeners are in vanilla Javascript.

The Basics

Event listeners are used for when an event happens and you want something to be done, such as when a user clicks a button or they submit information within a form. Essentially when these events are triggered it allows for interesting changes that affect the outcome of the interaction. This, I find, to be one of the most exciting things to code. It's the every day clicks and that we use when resizing a window or scrolling down a webpage or having our mouse hover over an image, text, or link. The possibility of creating code that enhances user interaction is endless. In this particular case we will focus on Javascript DOM Event Listeners, specifically the click and submit events. These two listeners combined can create really dynamic pages on your first few days of coding and give an instant feeling of satisfaction when they actually work.

Click Event Syntax

When using a click event we first need to create or grab an element in order to add the event listener to it. Since this is a click event, you want to state the event within the parameters along with a function. Here's an example:

element.addEventListener('click', function ());

We can keep this function anonymous or we can have a callback function within the parameters so that you can create a separate function for that specific event listener and declare all the things you want to happen for that particular event. But for now, let's console log that click to see if you targeted the correct element!

element.addEventListener('click', () => {
    console.log('Hello New World!');
}

//=> 'Hello New World!'

You should see that when you click on that particular element, whether it be a button, an image, or an h1 title tag, "Hello New World" should appear in the console as many times as you've clicked that element. Cool, huh?

Another fun way to test a click event is by using alert instead of console log. This will create a pop up alert of whatever text you want to appear upon the click. This can be very handy if you just want to create an alert for any particular user interaction, but it can also put a little excitement when testing out your click events.

element.addEventListener('click', () => {
    alert("Well, hello world!"); 
}

Submit Event Syntax

Now, submit events are a little different. If the HTML is formatted well, you'll want to grab the whole form, and NOT the button that appears with the form. The submit event is listening for input submission within the form and not a click event. Here's an example of what that looks like:

element.addEventListener('submit', function())

Of course, console log, console log, console log! However, this console log will be a little different as, again, it won't be listening for a click event for a submit event. The 'e' here stands for event.

element.addEventListener('submit', (e) => {
    console.log(e.target.value ) 
}

Wait a second... nothing happened when I tried to submit something! Here's the thing, the page, on a submit, will refresh automatically so it basically wipes your input and you never get to see it after the first submit click. To prevent this from happening, we would include .preventDefault() on the event. Like so:

element.addEventListener('submit', (e) => {
    e.preventDefault() 
        console.log(e.target.value ) 
}

e.target.value basically means that on the event, target the value within the input submission box and console log that back to me. You should see whatever you entered in the input in your console log.

And there ya have it! Now go out there and play around with these fun event listeners!

Resources:

JavaScript DOM EventListener