Search within TutorialsPark

Javascript : DOM and Event Object


All you need to know about working with DOM and Javascript Event Object.


Javascript Events Types.

The kind of event you are working with is defined using the property type , it accepts a string value eg: onclick, mouseover etc.

If you can fugure out the event you can use one function to handle multiple types. The demo below explains in detail.

In the below demo, the above example is done using Event handling function which is called when the event occurs.

Example: Javascript Events: Using a type Property.

Give it a TRY! » Note: The property type is used to figure out what kind of event you are working with.


Using DOM to setup Event Handling

The Event handlers explained in the introduction were very simple and can be used to perform only basic tasks.

So in order to use events to perform more complex and sophisticated handling, you must use the DOM and JavaScript Event Object.

The below demo shows a basic application on using an Event Object and how to use the DOM to attach a function with an event.

There is a parameter called e. It is attached to an Event object created by the browser and that represents the event when it is triggered.

The property target is used to get the HTMLElement that triggered the event so that style rules can be applied to the element.

Example: Javascript DOM for Event Handling.

Give it a TRY! » Note:JavaScript is kept at the bottom because it has work with the DOM.


Javascript Events: Event Listeners

The Event listeners have a function similar to that of event handlers, the difference it that there is no limitation of the handler when assigning multiple function to the same DOM element and event.

The syntax of an event listener is bit different from an handler, it has no equal to sign and it looks similar to a native method.


Javascript Events: Adding an Event

The method addEventListeners() is used to register a single event listener on the document

These methods exist on all DOM nodes and accept three arguments :

  1. The event type to listen for(eg: mouseout, click, error etc)
  2. The event handler function to be executed when the event is fired.
  3. and a Boolean value(called useCapture) to denote whether to call the event handler i.e true and false

The keyword this used with event handler represents a reference to the HTML element which fired the event handler, thus giving an easy access to it.

Example: Javascript Events: addEventListener() Method

Example: Javascript Events: addEventListener() Method

Give it a TRY! » Note: Click on the text to see the effects.


Javascript Events: Registering Multiple Events

You can add as many event listeners as you wish to an element.

In the below demo, the second text block is registered with two event handlers. When you roll the move over the content, the text is styled.

And when a click event occurs the background color and font-size is changed.

Example: Javascript Events : Registering Multiple Events

Give it a TRY! » Note: The onclick property is used to set up the handler for click event.


Javascript Events: Removing an EventListener

The method removeEventListener() is used to remove event listeners.(Obviously)

It too accepts three arguments : the name of event, the function to handle the event, the boolean value (or UseCapture).

The Boolean value true represents true for capturing event and false represents event bubbling(default)

Example: Javascript Events : Registering Multiple Events

Example: Javascript Events : Removing Event Listeners

Give it a TRY! » Note: The event listener for the first paragraph has been removed.


Table : Functions and Properties of Event Object.

Name Description Returns
type To specify the name of the event.(i.e click, mouseout) string
target The element at which the event is to be triggered HTMLElement
currentTarget Current element whose event listeners are currently being invoked. HTMLElement
eventPhase The phase in the life cycle of an event. number
bubbles A true value is returned if the event will bubble through the document, or else a false is returned. boolean
cancelable A true value is returned if the event has a default action that can be cancelled, otherwise a false is returned. boolean
timeStamp To denote the time at which the event was created, if no time is available then 0 is returned. string
stopPropogation() To cancel any further event capturing or event bubbling. Can be used if bubbles is true. void
stopImmediatePropogation() It cancels any further event capturing or event bubbling and prevents any other event handlers from being called. void
preventDefault() It prevents the browser from performing the default action associated with the event void
defaultPrevented A true value is returned if the preventDefault() has been called. boolean