DomEvents

DOM Events

What is DOM?

Document Object Model.

The HTML represented as an object.


							document.getElementById('id')

DOM Events

Events trigger when certain criteria are met.
Such as a click, mouse over, key press, on load.
You can tie these events to functions that you create that will be run when the event triggers.
Click me!
```
Click me!

						
```

Triggers

Let's see a list of the most frequently used ones, just for your information: Mouse Events - Events that occur when the mouse interacts with the HTML document belongs to the MouseEvent Object. click - The event occurs when the user clicks on an element contextmenu - The event occurs when the user right-clicks on an element to open a context menu dblclick - The event occurs when the user double-clicks on an element mousedown - The event occurs when the user presses a mouse button over an element mouseenter - The event occurs when the pointer is moved onto an element mouseleave - The event occurs when the pointer is moved out of an element mousemove - The event occurs when the pointer is moving while it is over an element mouseover - The event occurs when the pointer is moved onto an element, or onto one of its children mouseout - The event occurs when a user moves the mouse pointer out of an element, or out of one of its children Keyboard - Events - Events that occur when user presses a key on the keyboard, belongs to the KeyboardEvent Object. keydown - The event occurs when the user is pressing a key keypress - The event occurs when the user presses a key keyup - The event occurs when the user releases a key Drag Events - Events that occur when elements are dragged and/or dropped, belongs to the DragEvent Object. drag - The event occurs when an element is being dragged dragend - The event occurs when the user has finished dragging an element dragenter - The event occurs when the dragged element enters the drop target dragover - The event occurs when the dragged element is over the drop target dragleave - The event occurs when the dragged element leaves the drop target dragstart - The event occurs when the user starts to drag an element drop - The event occurs when the dragged element is dropped on the drop target Focus Events - Events that occur when elements gets or loses focus, belongs to the FocusEvent Object. blur - The event occurs when an element loses focus focus - The event occurs when an element gets focus Touch Events - Events that occur when user touches a touch-based device, belongs to the TouchEvent Object. touchstart - The event occurs when a finger is placed on a touch screen touchmove - The event occurs when a finger is dragged across the screen touchend - The event occurs when a finger is removed from a touch screen touchcancel - The event occurs when the touch is interrupted

Mouse Events

click
contextmenu
dblclick
mousedown
mouseenter
mouseleave
mouseout
mouseover
mouseup

Keyboard Events

keydown
keypress
keyup

Drag Events

drag
dargend
dragenter
dragover
dragleave
dragstart
drop

Focus Events

focus
blur

Touch Events

touchstart
touchmove
touchend
touchcancel

Event Handling Models

inline.
traditional.
W3C.

Inline Event Handling Model

Don’t recommend embedding events directly in page elements!

Traditional Event Handling Model

W3C Event Handling Model

Event Object

All event objects in the DOM are based on the Event Object.

Event Target

The target event property returns the element that triggered the event.

Event Methods

preventDefault

							
Vkontakte

stopPropagation

Hi