Events

Events allow us to do something when a specific action occurs.

Event functions

Single event type

$(".team-cards").on("click", function () {
    // do something on click
});

Multiple event types

$(".team-cards").on("click mouseenter", function () {
    // do something on click or mouseenter
});

Delegated event handler

In the previous examples, the click event was added only to team-cards present at page load. It didn't apply to new team-cards added via CMS pagination or AJAX. To apply the event to both current and future elements with this class, use the following function instead.

$(document).on("click", ".team-cards", function () {
  // do something
});

$(this)

Inside an event function, $(this) refers only to the element that the user interacted with. Instead of adding a class of "is-active" to every blog-card, the following script only adds the class to the blog-card that the user clicked on.

$(".blog-card").on("click", function () {
    $(this).addClass("is-active");
});

Event types

Mouse Events

  • click: Triggered when the element is clicked.

  • dblclick: Triggered when the element is double-clicked.

  • mouseenter: Triggered when the mouse pointer enters the element.

  • mouseleave: Triggered when the mouse pointer leaves the element.

  • mouseover: Triggered when the mouse pointer is moved over the element.

  • mouseout: Triggered when the mouse pointer is moved out of the element.

  • mousedown: Triggered when a mouse button is pressed down on the element.

  • mouseup: Triggered when a mouse button is released over the element.

  • mousemove: Triggered when the mouse pointer is moved within the element.

  • contextmenu: Triggered when the right mouse button is clicked (context menu).

Keyboard Events

  • keydown: Triggered when a key is pressed down.

  • keyup: Triggered when a key is released.

  • keypress: Triggered when a key is pressed.

Form Events

  • submit: Triggered when a form is submitted.

  • change: Triggered when the value of an element changes.

  • focus: Triggered when an element gains focus.

  • blur: Triggered when an element loses focus.

  • input: Triggered when the value of an <input>, <textarea>, or <select> element is changed.

  • select: Triggered when text is selected in an input element.

  • reset: Triggered when a form is reset.

Document/Window Events

  • load: Triggered when the document or an element is finished loading.

  • unload: Triggered when the document or an element is being unloaded.

  • scroll: Triggered when the user scrolls the element or the document.

  • resize: Triggered when the window is resized.

  • hashchange: Triggered when the fragment identifier of the URL has changed.

  • beforeunload: Triggered when the document is about to be unloaded.

Clipboard Events

  • copy: Triggered when the content is copied.

  • cut: Triggered when the content is cut.

  • paste: Triggered when the content is pasted.

Focus Events

  • focusin: Triggered when an element is about to gain focus.

  • focusout: Triggered when an element is about to lose focus.

Touch Events (for mobile)

  • touchstart: Triggered when a touch point is placed on the touch surface.

  • touchend: Triggered when a touch point is removed from the touch surface.

  • touchmove: Triggered when a touch point is moved along the touch surface.

  • touchcancel: Triggered when a touch point is interrupted.

Drag and Drop Events

  • dragstart: Triggered when the user starts dragging an element.

  • drag: Triggered when an element is being dragged.

  • dragend: Triggered when a drag operation is ended.

  • dragenter: Triggered when a dragged element enters a valid drop target.

  • dragover: Triggered when a dragged element is being dragged over a valid drop target.

  • dragleave: Triggered when a dragged element leaves a valid drop target.

  • drop: Triggered when a dragged element is dropped on a valid drop target.

Media Events

  • play: Triggered when the media is played.

  • pause: Triggered when the media is paused.

  • ended: Triggered when the media has reached the end.

  • volumechange: Triggered when the volume is changed.

  • timeupdate: Triggered when the playing position has changed.

  • seeking: Triggered when the user starts seeking the media.

  • seeked: Triggered when the user has finished seeking the media.

  • canplay: Triggered when the browser can start playing the media.

  • canplaythrough: Triggered when the browser estimates that it can play the media without stopping for buffering.

  • durationchange: Triggered when the duration of the media is changed.

  • loadeddata: Triggered when the media data is loaded.

  • loadedmetadata: Triggered when the metadata of the media is loaded.

  • progress: Triggered periodically as the browser loads the media.

Animation Events

  • animationstart: Triggered when a CSS animation starts.

  • animationend: Triggered when a CSS animation ends.

  • animationiteration: Triggered when a CSS animation is repeated.

Transition Events

  • transitionstart: Triggered when a CSS transition starts.

  • transitionend: Triggered when a CSS transition ends.

  • transitionrun: Triggered when a CSS transition is running.

Event info

We can pass "e" into the function to get information about this event. Console log "e" to see which information is available for your specific event type. A "mousemove" event can tell us the position of the cursor when the mouse moved. A "keydown" event can tell us which key was pressed.

$(".team-cards").on("mousemove", function (e) {
    console.log(e);
});

Once we know which event info we want to use, we can use it inside our function like this.

$(".team-cards").on("mousemove", function (e) {
    let cursorDistanceFromScreenLeft = e.clientX;
});

Removing events

Removes all events that were attached to the element

$(".element").unbind();

Removes only a certain event type that was attached to the element

$(".element").unbind("click")

PreviousAffecting ElementsNextEach Loop

Last updated