Event Listener Intro — JavaScript
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!
