The Event object in JavaScript DOM

The Event object conveys occurring HTML document's events to its handlers. The object is passed to event handlers by default and without an user defining it, in both DOM0 and DOM2. It holds the information on the element that caused an event, which type of event was triggered, …etc. For instance, mouse action events hold information on retrieving precise co-ordinates of the mouse, a keyboard events reports what key was pressed …etc. The list of methods and properties passed in the Event object is given in table:

The Event object methods and properties
Property/Method	Description
bubbles	Read only. Boolean property. True: event bubbles
cancelable	Read only. Boolean property. True: default behavior
currentTarget	Read only. Element property. Node to which this event handler is assigned
defaultPrevented	Read only. Boolean property. True: preventDefault() has been called.
detail	Read only, integer property. Extra information regarding event
eventPhase	Read only, integer property. Phase during which event handler is called. 1-capturing phase 2-at target 3-bubbling.
preventdefault()	Cancels default behavior for the event. This method is used when cancelable is true.
stopImmediatePropagation()	Cancels further event capturing or event bubbling and prevents any other event handlers from being called.
stopPropagation()	If bubbles is true this method is used. It prevents any further capturing and bubbling.
target	Read only, Element property. Target of the event
trusted	Read only. Boolean property. True: Event was generated by browser. False: Event was created by user using javascript
type	Read only. String property. Type of event fired

Example of the Event object combined with mouse events

In the example below a mouseover event is triggered when the mouse is moved over a paragraph. The Event object is passed to its handler without user adding it. The program outputs the type of the event as mouseover. Similarly event type can be displayed for all other events.

<!DOCTYPE html>
<html>

<style>
    body {font-family:Calibri; font-size:smaller;}
    p {color:#259; font-size:0.85em; font-weight:bold; border:1px solid #259; padding:0.4em 0.5em 0.5em;}
	p+p {color:#222; font-size:0.75em; font-weight:normal; border:none;}
  </style>

<body>
  <p id="para">Welcome! Bring your mouse here and take back!!</p>
  <p id="output"></p>
    <script>
        document.getElementById("para").addEventListener("mouseover", func1, false);
        function func1(){
			//Output: mouseover
			document.getElementById("output").innerHTML += event.type + " ";
		}
    </script>
</body>

</html>

›› go to examples ››

The Event object in JavaScript DOM

The Event object methods and properties

Example of the Event object combined with mouse events

Comments

About

Contact

Get Connected