Thursday, 2 November 2017


                                      Image result for events and event handling in javascript


DOM (Document Object Model) events allow event-driven programming languages like JavaScript to register various event handlers or listeners on the element nodes inside a DOM tree, such as in HTML documents.

Historically, like DOM, the event models used by various web browsers had some significant differences. This caused compatibility problems. To combat this, the event model was standardized by the World Wide Web Consortium (W3C) in DOM Level 2.


The standard DOM Events describes 3 phases of event propagation:




Capturing Phase :– When an event occurs in the DOM, notification of the event is passed starting at the top of the DOM tree and passing down through all parent element nodes all the way to the target node where the event occurred.


Target Phase :– After the capturing phase occurs, the Target phase occurs. The target phase only includes a notification of Node where the event took place.


Bubbling Phase :– This is the final phase to occur, although many people think this is the first phase. In the bubbling phase a notice is passed from the target Node up through all of the parent Nodes all the way back to the top root of the DOM.


Some important events :-  


1) MOUSE :-

onclick              The event occurs when the user clicks on an element

oncontextmenu  The event occurs when the user right-clicks on an element to open a                                 context menu

ondblclick          The event occurs when the user double-clicks on an element

onmousedown  The event occurs when the user presses a mouse button over an element
onmouseenter  The event occurs when the pointer is moved onto an element

onmouseleave  The event occurs when the pointer is moved out of an element

onmousemove  The event occurs when the pointer is moving while it is over an element
onmouseover  The event occurs when the pointer is moved onto an element, or onto                               one of its children

onmouseout  The event occurs when a user moves the mouse pointer out of an                                       element, or out of one of its children

onmouseup  The event occurs when a user releases a mouse button over an element


2) KEYBOARD :-

onkeydown The event occurs when the user is pressing a key

onkeypress The event occurs when the user presses a key

onkeyup         The event occurs when the user releases a key



3) OTHER EVENTS:-

onblur          The event occurs when an element loses focus

onfocus          The event occurs when an element gets focus

Some Methods :-


preventDefault() Cancels the event if it is cancelable, meaning that the default                                          action that belongs to the event will not occur

stopPropagation()     Prevents further propagation of an event during event flow


No comments:

Post a Comment