How to Activate an Event Listener in Javascript Over and Over Again

Read Time: 8 mins Languages:

If you're a web designer who's yet to step into the world of JavaScript, or you're just starting in front end evolution, this tutorial is the perfect way to begin. It will explicate a couple of really useful concepts, very easily, which you lot'll be able to use correct abroad and will get yous out of the JavaScript starting blocks.

JavaScript Effect Listeners for Designers

Watch this explanation by Adi Purdila, subscribe to the Tuts+ Youtube channel, or ringlet down to read the complete tutorial!

What Are Event Listeners?

Effect listeners are among the near oftentimes used JavaScript structures in web design. They allow us to add interactive functionality to HTML elements by "listening" to unlike events that take place on the page, such as when the user clicks a button, presses a key, or when an element loads.

When an result happens, we can execute something.

The most common events you might "listen out for" are load,click,touchstart,mouseover,keydown. You can check out all the DOM events in MDN's Event Reference guide.

By following this guide you lot'll learn how to create a JavaScript event listener in 3 different means:

• HTML's global onevent attributes
• jQuery'southward event method
• The DOM API'saddEventListener() method

Finally, we'll have expect at how to create a bones reveal-hibernate functionality using a click event listener.

i. How to Utilize Global Onevent Attributes in HTML

If you only want to add a one-liner script to a particular HTML element, y'all tin can use HTML'due south global onevent attributes defined by the HTML specification, such every bit onclick, onload, andonmouseover.

These attributes tin can be directly added to whatever HTML chemical element that's present on the page, however, their browser support widely varies. For example, onclick is supported by all modern browsers up from IE9, while support for other onevent attributes such every bit ondrag is more than patchy. You tin can bank check out browser support for global onevent attributes past typing "globaleventhandlers" into the search box on CanIUse.

The syntax of onevent attributes is unproblematic and, as they are global attributes, you can utilise them on any element, for case:

<push button onclick="alert('Hello');">Click me</push button>

Here, the onclick effect listener listens to the click event on 1 specific button. When the event fires (the user clicks this push), the alert() callback function is executed.

If we desire to add the same alert functionality to each push button on the page, we should add the click event listener in a separate script rather than using the onclick aspect.

ii. How to Create an Outcome Listener in jQuery

jQuery has several event methods that mind to unlike kinds of events, such every bit .click(), .hover(), .mouseover(), .set up(), .load(), and others. For instance, this is how the above event listener will look in jQuery:

$("button").click(function() {     alert('Hello jQuery'); });

This event listener adds the 'Hullo jQuery' alert message to all <button> elements on the folio. To target just one specific button, we should add a unique id to it and target that id with the click() issue method, for instance:

$("#unique-push button").click(function() {     alert('Hi jQuery'); });

As jQuery's event methods target the same UI events equally HTML's global onevent attributes, in that location are many overlaps between the 2. However, as jQuery is too a library that runs on the top of native JavaScript, it has some event methods, such as.hover(), that are not included in the DOM API, and then we can't heed to them with either onevent attributes or the native addEventListener() method.

The .on() Method

jQuery's result listeners have another advantage over the two other techniques: the.on() method. Information technology allows us to adhere more than than one consequence to the same callback function. For instance, nosotros can add the same warning functionality to both the click and mouseover events at the same fourth dimension:

$("push").on("click mouseover", function() {     warning("Howdy jQuery events");  });        

3. How to Create an Effect Listener in JavaScript with addEventListener()

Using native JavaScript, we can heed to all the events defined in MDN's Issue Reference, including bear on events. Equally this doesn't crave the use of a third-party library, information technology's the about operation-friendly solution to add interactive functionality to HTML elements.

We can create an event listener in JavaScript using the addEventListener() method that's congenital into every modern browser.

This is how our alert button example will await using patently JavaScript and theaddEventListener() method:

/* Selecting DOM element */ const button = document.querySelector("button");  /* Callback function */ part alertButton() {     warning('Hullo native JavaScript'); }  /* Effect listener */ button.addEventListener("click", alertButton, false);        

Here it is in activeness:

In native JavaScript, we need to showtime select the DOM element that nosotros want to add the event listener to. The querySelector() method selects the outset element that matches a specified selector. So in our case, it selects the first <button> element on the folio.

The custom alertButton() function is the callback role that will be called when the user clicks the button.

Finally, we add together the result listener. Nosotros always have to attach the addEventListener() method to a pre-selected DOM element using the dot notation. In the parameters, first we define the outcome nosotros want to listen to ("click"), then the name of the callback part (alertButton), finally the value of the useCapture parameter (we use the default imitation value, every bit nosotros don't want to capture the effect—here's a simple explanation about how to utiliseuseCapture).

How to Add Functionality to All Buttons

Then, the lawmaking higher up adds the alert function to the first button on the page. Simply, how would we add the same functionality to all buttons? To do then, we need to use the querySelectorAll() method, loop through the elements, and add together an outcome listener to each button:

/* Selecting DOM nodelist */ const buttons = certificate.querySelectorAll("push button");  /* Callback function */ role alertButton() {     alert('Hi native JavaScript'); }  /* Consequence listeners */ for (let button of buttons) {       push button.addEventListener("click", alertButton, false);     }

As querySelectorAll() returns a NodeList instead of a single element, we need to loop through the nodes to add a click event listener to each push. For instance, if we take iii buttons on the page, the code above will create iii click event listeners.

Note that you can just listen to one consequence withaddEventListener(). And then if you desire the custom alertButton() function to fire on some other outcome blazon such equally mouseover, you'll need to create a second event listener rule:

/* Outcome listeners */ for (let button of buttons) {       push.addEventListener("click", alertButton, imitation);       button.addEventListener("mouseover", alertButton, false);     }

iv. How to Combine Event Listeners with CSS and Conditionals

Probably the best thing about event listeners is that nosotros tin combine them with CSS and if-else conditional statements. In this way, nosotros tin target the dissimilar states of the same element with CSS and/or JavaScript.

For instance, hither's a very simple example; a reveal-hide functionality. The HTML just consists of a button and a department. Nosotros will bind the section to the push using a JavaScript issue listener. The button will be responsible for revealing and hiding the section below it:

<button grade="reveal-button">Click me</push> <section class="hidden-department">Lorem ipsum dolor sit amet...</section>

In the JavaScript, nosotros offset create ii constants (revealButton and hiddenSection) for the two HTML elements using the querySelector() method.

Then, in the revealSection() callback role, we cheque if the hidden section has the reveal class or not using the classList property defined in the DOM API. If the hidden section has this class, we remove information technology using the DOM API's remove() method, and if it doesn't, we add information technology using the DOM API'southward add together() method. Finally, we create an result listener for the click event.

/* Selecting DOM elements */ const revealButton = document.querySelector(".reveal-push button"); const hiddenSection = document.querySelector(".hidden-section");  /* Callback function */ role revealSection() {     if (hiddenSection.classList.contains("reveal")) {         hiddenSection.classList.remove("reveal");     } else {         hiddenSection.classList.add together("reveal");     } }  /* Event listener */ revealButton.addEventListener("click", revealSection, false);

Now, the JavaScript adds or removes the .reveal class depending on the current state of the hidden section. However, we still have to visually hibernate or reveal the chemical element using CSS:

.subconscious-section {     display: none; } .hidden-section.reveal {     display: block; }

And, that'due south all! When the user commencement clicks the push button, the hidden section is revealed, and when they click it the second time, it gets hidden again. You can examination the functionality in the Codepen demo below:

This basic reveal-hide functionality tin exist used for many different things, for instance, for toggling a card on pocket-size screens, creating tabbed sections, displaying error messages, and more.

You lot Now Understand JavaScript Event Listeners!

In this guide, we looked at events that are initiated past users (click and mouseover), and how yous tin create event listeners for them.

Finding the right type of event requires solid testing, as there are events that are similar to each other just not quite the same, such equally keydown and keypress. Plus, if there is more 1 event listener on a page, they tin interact with each other as well.

Note that you should e'er test how your outcome listeners piece of work on dissimilar devices (this is specially important for touch events). Finally, each event listener should be fastened to the element where it makes the most sense, equally ideally, at that place shouldn't be any unnecessary consequence listeners in your lawmaking.

Go forth and build!

Did you detect this postal service useful?

Spider web developer & technical writer. Roofing web design, web development, UX pattern, and accessibility.

wraynotheires.blogspot.com

Source: https://webdesign.tutsplus.com/tutorials/introduction-to-javascript-event-listeners--cms-35236

Share this post