Event Listener Intro — JavaScript

Photo by Alireza Attari on Unsplash

Event listeners are my favorite part (so far) in JavaScript. They enable the user to interact with the web page without refreshing it when submitting a form, clicking a button, etc…

Below is a list of event listeners you can use to make your web page more interactive. You will find the link to MDN documentation for each of them if you would like further information.

MDN is a website known as one of the most reliable online documentation for Javascript as well as HTML and CSS.

1. Click listener

This is a mouse event reference that will listen for “clicks”, most commonly on a button. Please note this is not the best event listener to use when submitting a form. More details in part 2 of this blog.

HTML

<button id="greeting" class="greeting">Click here</button>

JavaScript

//store element in a constant variable //const clickHereButton = document.getElementById("greeting")// handleClick function returns "Hello World" as an alert //function handleClick(event) {
alert("Hello World")
}
// add event listener which call the handleClick function //clickHereButton.addEventListener("click", handleClick)

Output: an alert pops up when the button “click here” is clicked

MDN documentation: https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event

2. Form submit listener

There is a listener custom made for forms. It can listen to a click or “Enter” key pressed on the “submit” button of the form. Note that the event listener doesn’t listen to the submit button itself. It actually listens to the form element being submitted.

When the event is triggered, you can use the function preventDefault() against the event to stop the form from redirecting the user to a new page. To reset the form, add .reset() against the form element.

HTML

<form id="get-name">
<label for="first-name"><strong>First Name:</strong></label>
<input type="text" name="first-name" id="first-name" />
<label for="last-name"><strong>Last Name:</strong></label>
<input type="text" name="last-name" id="last-name" />
<input type="submit" value="Submit">
</form>

JavaScript

//store element in a constant variable //const getNameForm = document.getElementById("get-name")// handleSubmit function prevent form from executing default functionalities, returns "Hello (firstName input) (lastName input)" as an alert and reset the input values //function handleSubmit(event) {
event.preventDefault()
alert(`Hello ${event.target[0].value} ${event.target[1].value}`)
getNameForm.reset()
}
// add event listener which calls the handleSubmit function //getNameForm.addEventListener("submit", handleSubmit)

Output: Return the first name and the last name submitted in an alert box

MDN documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event

3. Listens to select

This is an event that listens for text selection. You can also return what has been selected.

HTML:

<div class="greeting-div">
<input type="text" id="greeting-input" value="Hello, World!">
</div>

JavaScript:

//store element in a constant variable //const greetingInput = document.querySelector("input#greeting-input")// handleSelect function creates store the selection as a constant variable and return the output in an alert //function handleSelect(event) {
const selection = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd)
alert(`You selected ${selection}`)
}
// add event listener which calls the handleSelect function //greetingInput.addEventListener("select", handleSelect)

Output:

MDN documentation: https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event

4. Listens to Mouseover

This event will trigger if the mouse is moved over a particular element

HTML:

<input type="text" id="greeting-input" value="Hello, World!">

JavaScript:

//store element in a constant variable //const greetingInput = document.querySelector("input#greeting-input")// handleMouseOver function changes the background color of the input to blue//function handleMouseOver(event) {
greetingInput.style.backgroundColor = "blue"
}
// add event listener which calls the handleMouseOver function //greetingInput.addEventListener("mouseover", handleMouseOver)

Output:

MDN documentation: https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event

There are many other exciting event listeners you can use that I did not list in this blog. Please refer to the following link to see the full event reference list https://developer.mozilla.org/en-US/docs/Web/Events

Keep listening for events!

JavaScript Mid-Level Developer, I write blogs to learn and share what I learn.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store