jQuery Event Basics

Introduction

Welcome to the jQuery documentation! This lab will give you an introduction to jQuery Event.

jQuery provides simple methods for attaching event handlers to selections. When an event occurs, the provided function is executed. Inside the function, this refers to the DOM element that initiated the event.

The event handling function can receive an event object. This object can be used to determine the nature of the event, and to prevent the event’s default behavior.

Skills Graph

Setting Up Event Responses on DOM Elements

index.html have already been provided in the VM.

jQuery makes it straightforward to set up event-driven responses on page elements. These events are often triggered by the end user's interaction with the page, such as when text is entered into a form element or the mouse pointer is moved. In some cases, such as the page load and unload events, the browser itself will trigger the event.

jQuery offers convenience methods for most native browser events. These methods — including .click(), .focus(), .blur(), .change(), etc. — are shorthand for jQuery's .on() method. The on method is useful for binding the same handler function to multiple events, when you want to provide data to the event handler, when you are working with custom events, or when you want to pass an object of multiple events and handlers.

// Event setup using a convenience method
$("p").click(function () {
  console.log("You clicked a paragraph!");
});

// Equivalent event setup using the `.on()` method
$("p").on("click", function () {
  console.log("click");
});

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Extending Events to New Page Elements

It is important to note that .on() can only create event listeners on elements that exist at the time you set up the listeners.For example:

$(document).ready(function () {
  // Now create a new button element with the alert class.
  $("<button class='alert'>Alert!</button>").appendTo(document.body);
  // Sets up click behavior on all button elements with the alert class
  // that exist in the DOM when the instruction was executed
  $("button.alert").on("click", function () {
    console.log("A button with the alert class was clicked!");
  });
});

If similar elements are created after the event listeners are set up, they won't automatically pick up the event behaviors you've previously set up.

You can refresh the Web 8080 Tab to preview the web page.

Setting Up Multiple Event Responses

Quite often elements in your application will be bound to multiple events. If multiple events are to share the same handling function, you can provide the event types as a space-separated list to .on():

// Multiple events, same handler
$("div").on(
  "click change", // Bind handlers for multiple events
  function () {
    console.log("An input was clicked or changed!");
  }
);

When each event has its own handler, you can pass an object into .on() with one or more key/value pairs, with the key being the event name and the value being the function to handle the event.

// Binding multiple events with different handlers
$("div").on({
  click: function () {
    console.log("clicked!");
  },
  mouseover: function () {
    console.log("hovered!");
  }
});

You can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the jQuery Event Basics lab. To learn more about the jQuery API, please see the official jQuery documentation.