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