JavaScript eventListeners for beginners
Published: 2022-11-16 18:45:46

In this blog I will go over some simple events to add to elements with addEventListener(). However, first I will walk through setting up an event listener. 

```
const element = document.querySelector(element)
//isolate the element you want to add the event listener to

element.addEventListener('event', () => {
    //the function that results from your event listener below
})
```

First isolate the event target you want to add an event listener to with querySelector(), findElementByID(), findElementByClassName(), etc. Once that is defined simply add the event listener to the event target with dot notation, specify the event that triggers it, and write the function that results.

There are a large number of events you can call and they can be found [here](https://www.w3schools.com/jsref/dom_obj_event.asp). I think there are four you should have in your tool belt as a JS beginner.

## **Click:**

Click events are the most common events you will come across on any webpage. When you click event target x, function y occurs. If I want to make an image populate a container when clicked on I would use the following code: 

```
const image = document.querySelector(img)
//isolate the element you want to add the event listener to

image.addEventListener('click', () => {
    //the function that results from your event listener below
    const container = document.querySelector(div)
    container.append(image)
})
```

## **Submit:**

Submit events typically have to do with form elements. Their default response is to refresh the page, so more often than not, you nee to add a .preventDefault() to your event listener function. If i want to add a submit listener to a form that adds the submitted text to an unordered list, I would use the following code:

```
const form = document.querySelector(img)
const list = document.querySelector(ul)
//isolate the elements you want to add/use in the event listener

form.addEventListener('submit', (e) => {
    //prevent default to prevent page refresh
    e.preventDefault()
//the function that results from your event listener below
    const listEntry = document.createElement('ul')
    listItem.textContent = form.name.value
    list.append(listEntry)
})
```
Name is an attribute that can be assigned within the form input's html. For more on that look [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).

Another important detail about submit events is that the element you are adding the eventListener to is the form, not the submit input.  

## **MouseOver/MouseOut:**

Lastly, the mouseOver/mouseOut events work in tandem. If you only have one or the other. The listener will be triggered as soon as your js script is loaded. In order to create a "hover" effect you need a mouseOver event and a mouseOut event. If i wanted an image to change when moused over I would use the following code:

```
const image = document.querySelector('img')
//isolate the elements you want to add/use in the event listener

image.addEventListener('mouseOver', () => {
    //the function that results from your mouseOver event
    image.src = 'newImageSource'
})

image.addEventListener('mouseOut', () => {
    //the function that results from the mouseOut event
    image.src = 'originalImageSource'
})
```

With these four event listeners you will be on your way to creating dynamic web applications with JS.