The Event Object in javascript

The event object in javascript is created by the javascript runtime engine which gets passed to an event handler. Here are some key properties of this object:

1. bubbles - true or false - based upon whether this event bubbles up to their parents or not.

2. cancelable - true or false - will let us know whether we can cancel any kind of propagation of this event.

3. currentTarget - is the DOM (Document Object Model) element that we are currently looking at.

4. defaultPrevented - true or false - tells us if preventDefault() was called.

5. detail - This property holds extra information about the event.

6. eventPhase - 1/2/3 - 1 means that it is the capture phase which is the opposite of bubbling - going in the other direction of bubbling. 2 means that we are currently at the target. 3 means that we are in the process of bubbling.

7. preventDefault() - To prevent the browser from executing any default behavior. An example would be preventing the submit button on a form submit the form. Another example would be preventing the browser following a link in an anchor tag.

8. stopPropagation() - will stop all event-capturing and bubbling.

9. stopImmediatePropagation - will stop all event-capturing and bubbling but will also make sure that no more handlers get called.

10. target - the original target of this event. For example if we click on a button and the event bubbles up from parent to parent to parent, target will be set to that original button.

11. trusted - true or false - true if event comes from the browser. false if event is triggered through the javascript code written by the programmer.

12. type - name of the event. For example it would be the string "click" for a click event.