# Events

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

***

## Event functions

#### Single event type

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

#### Multiple event types

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

#### Delegated event handler

{% hint style="info" %}
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.
{% endhint %}

```javascript
$(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.

```javascript
$(".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.

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

<div align="left"><figure><img src="https://4208221935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnkRd0l7hxCM4iKa5tj2m%2Fuploads%2F3QonXAjsaqR6BpCsBYbO%2Fevent-info.png?alt=media&#x26;token=03dbdf4d-c058-4db4-b2cd-cd61ccdeb997" alt="" width="375"><figcaption></figcaption></figure></div>

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

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

***

## Removing events

#### Removes all events that were attached to the element

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

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

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