What is Event

The actions to which JavaScript can respond are called Events. An Event is some notable action to which a script can respond.

• Clicking an element
• Submitting a form
• Scrolling page
• Hovering an element

Event Handler

An Event handler is JavaScript code associated with a particular part of the document and a particular event. A handler is executed if and when the given event occurs at the part of the document to which it is associated.

• onclick
• ondblclick
• onchange
• onblur

Event Binding with HTML Attribute

These bindings are element attributes, such as onclick and on change, which can be set equal to JavaScript that is to be executed when the given event occurs at that object.

Ex: – <button onclick= “alert(‘Button Clicked’);”>Click Me</button>

Event Binding with JavaScript

When we use this approach we can add or remove handlers dynamically as well as it improves the separation between the structure of the document and its logic and presentation.

Ex: –

Event Binding with JavaScript

Overwriting Event Handler

DOM Event Model

The DOM 2 Event Model specification describes a standard way to create, capture, handle and cancel event in a tree like structure such as an XHTML document’s object hierarchy.

Phases

• Capture Phase
• Target Phase
• Bubbling Phase

addEventListener ( )

This method is introduced by DOM2, used to engage an event handler in a page.

Syntax:-
Object.addEventListener(event, handler, capturePhase);

Where,

• Object is the node to which the listener is to be bound.
• Event is a string indicating the type of event.
• Handler is the function that should be called when the event occurs.
• capturePhase is a Boolean indicating whether to use Bubbling (false) or Capture (true). This is optional. If you omit there is false by default.

Ex:-
btn.addEventListener(“click”, show, false);

Why we should use addEventListener ( ) ?

Why we should use addEventListener ( )

• It allows you to bind multiple handlers to an object for the same event.

• It enables you finer-grained control of the phase when the listener is activated (Capture or Bubbling).

• It works on any DOM element, not just HTML elements.

removeEventListener ( )

DOM Event Flow/ Event Propagation

The DOM 2 Event Model specification describes a standard way to create, capture, handle and cancel event in a tree like structure such as an XHTML document’s object hierarchy.

Phases

• Capture Phase
• Target Phase
• Bubbling Phase

Event Object

DOM events pass an Event object as an argument to handlers. This object contains extra information about the event that occurred.

Ex:- addEventListener(“click”, function(e) { });

Event Methods

• stopPropagation() –  Prevents further propagation of the current event in the capturing and bubbling phases.

Syntax:- e.stopPropagation();

• stopImmediatePropagation() – Prevents other listeners of the same event from being called.

Syntax:- e.stopImmediatePropagation();

• preventDefault()  – The Event interface’s preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

Syntax:- e.preventDefault();

Mouse Event

• mousedown – It fires when mouse button is pressed down.
• mouseup – It fires when the mouse button is released.
• click – It fires when something is clicked. mousedown, mouseup and click events fires in sequence.
• dblclick – It fires when something is clicked twice in rapid succession. mousedown, mouseup, click, mousedown, mouseup, click, and dblclick events fires in sequence.
• mouseenter – It fires when a mouse starts to hover over some element. NO bubble.
• mouseleave – It fires when a mouse exits while hovering over some element. No bubble.
• mouseover – It fires when mouse is hovering over some element.
• mouseout – It fires when mouse leaves from hovering over some element.
• mousemove – It fires when the mouse moves.
• contextmenu – It fires when mouse right button is clicked.

Focus Event

• focus – It fires when an element gains focus, such as selecting a form field. No Bubble

• blur – It fires when element loses focus, such as moving away from a form field. No Bubble

• focusin – It fires just as an element is about to gain focus.

• focusout – It fires just as an element loses focus and just before the blur event.

Key Event

• keydown – It fires as a key is pressed down.

• keypress – It fires after a key is pressed down (after keydown). It only works with printable characters.

• keyup – It fires as the key is released.

Tagged : Attributes / events / HTML / Javascript