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")