Complete 2024 Web Development Bootcamp

Dr. Angela Yu

Back to jQuery Index Page

jQuery Event Listeners
Intro

Events are things that happen in the system you are programming — the system produces (or "fires") a signal of some kind when an event occurs, and provides a mechanism by which an action can be automatically taken (that is, some code running) when the event occurs. Events are fired inside the browser window, and tend to be attached to a specific item that resides in it. This might be a single element, a set of elements, the HTML document loaded in the current tab, or the entire browser window. There are many different types of events that can occur.

For example:

  • The user selects, clicks, or hovers the cursor over a certain element.
  • The user presses a key on the keyboard.
  • The user resizes or closes the browser window.
  • A web page finishes loading.
  • A form is submitted.
  • A video is played, paused, or ends.
  • An error occurs.

You can gather from this (and from glancing at the MDN event reference) that there are a lot of events that can be fired.

Further Reference, MDN:



jQuery Events

To add an eventListener in jQuery, the basic syntax is:

  • jQuery
  • $("targetedElement").eventType(function() {
    • // event processing code
  • });
So we target the element we want to add an event listener to. We define the type of event listener we want to use. And we write the code that runs after the event is triggered.

So if we wanted to target a button for a click event, in vanilla JavaScript, it looks like this:

  • JavaScript
  • button.addEventListener("click", function() {
    • // what to do when button is clicked
  • });
but with jQuery, it would look something like this:
  • jQuery
  • $("button").click(function() {
    • // what to do when button is clicked
  • });
much shorter and simpler syntax.

Another example of a shorter, cleaner code. Say we have an <h1> element, and five buttons on a page. We want to target all of the buttons so that if we click on any one button, it will change the h1 text color. With vanilla JavaScript, we would have to write a for loop to cycle through all of the buttons and add an eventListener to each one, as we loop through.

It would look something like this:

  • JavaScript
  • for ( i = 0; i < 5; i++) {
    • document.querySelectorAll("button") [ i ] . addEventListener( "click",  function() {
      • document.querySelector("h1").style.color = "green";
    • });
  • }

And for jQuery, it would look like this:

  • jQuery
  • $("button").click(function() {
    • $("h1").css("color", "green");
  • });
and once again, a much shorter and simpler syntax. No for loop needed.

Let's try this with a keypress. Say we have a text input. We want the background color of th input to change when we start typing in the txt field. We'll use the keypress event to trigger the color change, like so:

  • jQuery
  • $("input").keypress(function() {
    • $("input").css("backgroundColor", "yellow");
  • });

key trap

Interestingly, we could also use this approach as a key trap to trap for which key was pressed, and then run different sets of code depending on which key was pressed. Simply add an event variable to the function call. *note: this variable name is usually e, evt, or event, but you can name it anything you like. The code would look something like this:

  • jQuery
  • $("button").click(function(evt) {
    • console.log(evt);
    • $("h1").css("color", "green");
  • });
In this case, evt would actually represent the key that was pressed, and you can write your code to process this anyway you wish.


Back to Top