Kirti Bhardwaj

JS Concepts -> Events An Overview

Posted on

Introduction

Best way to define something is to look at examples, so here are a few examples of events [Context is limited to web]:

User presses a key on keyboard
Error Occured
Api returned data
Web page finished loading

Event interface represents any event which happens in DOM, there are many types of events and they use different interfaces. Some of these interfaces are based on main Event interface, which contains common properties and methods for all events.

Let’s go at it again;

Events are objects which implement the event interface or some interface based on main Event interface. Just like other objects these event objects have some properties and methods too, we will delve into standardized properties first.

Properties

1. bubbles:

    Syntax: event.bubbles

  • Value Type: Boolean

  • Property Description: Returns true or false depending on how event was initialized. True if event goes through its target attribute value’s ancestors in reverse tree order, and false otherwise

2. cancelBubble:

    Syntax: event.cancelBubble

  • Value Type: Boolean

  • Property Description: Alias to Event.stopPropagation(); Getter will return true if context object’s stop propagation flag is set, else false.

3. cancelable:

    Syntax:event.cancelable

  • Value Type: Boolean

  • Property Description: Returns true or false depending on how event was initialized. Its return value does not always carry meaning, but true can indicate that part of the operation during which event was dispatched, can be canceled by invoking the preventDefault() method.

    On the other hand, calling preventDefault() on uncancelable events produce errors.

4. composed:

    Syntax:event.composed

  • Value Type: Boolean

  • Property Description: Returns true or false depending on how event was initialized. True if event invokes listeners past a ShadowRoot node that is the root of its target attribute value, and false otherwise.

    All UA [ user action ]-dispatched UI events are composed. Propagation occurs if bubbles property is set to true.

    You can determine the path the event will follow as it makes its way through the shadow root to the DOM root by calling composedPath().

5. currentTarget:

    Syntax: event.currentTarget

  • Value Type: Reference to element to which event handler is attached.

  • Property Description: Identifies the current target of the event, as event traverses the DOM.Must be initialized to null when and event is created.

6. defaultPrevented:

    Syntax: event.defaultPrevented

  • Value Type: Boolean

  • Property Description: Returns true if preventDefault() was invoked successfully to indicate cancellation, and false otherwise.

7. eventPhase:

    Syntax:event.eventPhase

  • Value Type: Integer

  • Property Description: Returns an integer which specifies the current evaluation phase of the event flow. Phases can be:

    NONE, 
CAPTURING_PHASE, 
AT_TARGET, and 
BUBBLING_PHASE.

    Discussed in detail in another post: Event phase

8. target:

    Syntax: event.target

  • Value Type:A reference to the object that dispatched the event

  • Property_Description:The EventTarget object represents the target to which an event is dispatched when something has occurred.This has an associated activation behavior algorithm.

    More about this in another post: Event Target

9. timeStamp:

    Syntax: event.timeStamp

  • Value Type: Timestamp

  • Property_Description: This value is the number of milliseconds elapsed from the beginning of the current document’s lifetime till the event was created.

10. type:

    Syntax: event.type

  • Value Type: String

  • Property_Description: Read only, returns a string containing the event type. It is set when event is constructed for e.g. ‘click’, ‘error’ etc.

11. isTrusted:

    Syntax: event.isTrusted

  • Value Type: Boolean

  • Property_Description: Is a convenience which indicates whether event is dispatched by user agent. Is true when the event was generated by a user action, and false when the event was created or modified by a script or dispatched via dispatchEvent. Exception is click() which leads to user agent dispatching an event with isTrusted attribute initialized to false.

Methods

1. createEvent:

     Syntax: document.createEvent(type)
  • Attributes:
  • Type: A string indicating the event type to create.
  • Return Value: New DOM Event Object

  • Description: Returns a new DOM Event Object of the specified type which must be initialized before use.

    Read More: CreateEvent

2. composedPath:

    Syntax: Event.composedPath();
  • Attributes: None
  • Return Value: Array of eventTraget objects
  • Description: Returns an array of eventTraget objects of event’s path on which event listener will be invoked. Except any noded in shadow trees where shadow root’s mode is ‘closed’ that are not reachable from event’s currentTarget. More on this later.

3. preventDefault:

    Syntax: Event.preventDefault();
  • Attributes:None
  • Return Value: Undefined

  • Description: Tells user agent to not take the default action of the event, if it has ‘cancelable’ property set to true and ‘passive’ is set to false.Calling preventDefault() during any stage of event flow cancels the event, meaning that any default action normally taken by the implementation as a result of the event will not occur.

    You can use Event.cancelable to check if the event is cancelable. Calling preventDefault() for a non-cancelable event has no effect.Also, causes event.defaultPrevented() property’s value to be true.

4. stopImmediatePropagation:

    Syntax: event.stopImmediatePropagation();
  • Attributes:None

  • Description: If Multiple listeners are attached to same element with same event type; they are called in order in which they have been added. If event.stopImmediatePropagation() is called , no remaining listeners will be called.

    The stopImmediatePropagation() method, when invoked, must set context object’s stop propagation flag and context object’s stop immediate propagation flag. If dispatched in a tree, prevents event from reaching any other objects.

5. stopPropagation:

     Syntax: event.stopPropagation();
  • Attributes:None
  • Description: When dispatched in a tree, invoking this method prevents event from reaching any objects other than the current object.The stopPropagation() method, when invoked, must set the context object’s stop propagation flag.

Now, that we know a bit about Event objects and what properties and methods they make available to us, let us discuss types of Events:

Events can represent everything from basic user interactions to automated notifications of things happening in the rendering model. Typically, events are dispatched by user agent as a result of user interaction or completion of some task, applications can also dispatch events [synthetic events]. Events are also used to let an application control what happens next in an operation.

KeyBoard Events:

1. keydown
2. keypress
3. keyup

Mouse Events:

1.  mouseenter
2.  mouseover
3.  mousemove
4.  mousedown
5.  mouseup
6.  auxclick
7.  click
8.  dblclick
9.  contextmenu
10. wheel
11. mouseleave
12. mouseout
13. select
14. pointerlockchange
15. pointerlockerror

Drag and Drop Events:

1. drag
2. dragend
3. dragenter
4. dragexit
5. dragleave
6. dragover
7. dragstart
8. drop

There are a lot more things to understand about events that will come up in future posts.

Attribution

You can get a full list of events here: MDN Events And read a bit more about events: MDN Events API and the dom spec: Spec