Thursday, February 18, 2016

Types of JavaScript Events

W3C DOM Events

DOM Level 2 UIEvent: user interface events occur for interactions with browser's window
type event description target
load Fires when HTML and all resources of a web page have finished loading document, window
unload Fires when web page is unloading for a new page requested body, window
error Fires when browser encounter a JS error or resource does not exist (inconsistent support)
resize Fires repeatedly as browser's window is being resized window
scroll Fires repeatedly as user scrolls web page document, element

Usage:

  • The load event is commonly used to trigger scripts that access the content of a page. It can cause the page to look slow, because it is raised only when all images are fully loaded.
  • As resize and scroll events fire repeatedly, do not use them to trigger complicated code.


DOM Level 4 FocusEvents: focus events occur when an link element or form field gains or loses focus
type event description
focus or focusin Element gains focus
blur or focusout Element loses focus

Usage:

  • The focus event is used when you want to show feedback to users as they interact with an element, for example with a tooltip. Do not confuse focus event with CSS :focus pseudoclass.
  • The blur event is used when you need to trigger form validation as a user moves from one control to the next, rather than waiting for form submission.


DOM Level 2 MouseEvents: mouse events occur for a user interaction through mouse, touchscreen, trackpad
type event description
click
  • User presses and releases the main mouse button.
  • User presses the Enter key when an element has focus
  • User tap on touchscreen
dblclick
  • User presses and releases a mouse button twice.
  • User taps on touchscreen twice
mousedown User presses a mouse button over an element (like touchstart on touchscreen)
mouseup User releases a mouse button over an element (like touchend on touchscreen)
mouseover User moves the mouse over an element. (not on touchscreen)
mousemove Fire repeatedly when user moves the mouse around an element. (not on touchscreen)
mouseout User moves the mouse off an element (not on touchscreen)

Usage:

  • Target: all HTML elements on a web page support mouse events.
  • Mouse events occur in the sequence: mousedown → mouseup → click, if you stop an event the following one will never happen.
  • Do not use mouse events to change CSS, use the :hover pseudoclass
  • Do not use the click event on form element, use the focus event.


DOM Level 4 KeyboardEvent: occur for a user's interaction with keyboard
type event description
input Fires when the content of <input> or <textarea> change.
Incomplete support in IE9. For older browser you should use the keydown event
keydown Fire when user presses a key on the keyboard.
Fire repeatedly while the user hold down the key
keyup Fire when user releases a key
keypress Fire when user presses a key of a printable character

Usage:

  • Keyboard event fire in the sequence: keydown → (keypress) → input → keyup
  • DOM Level 4 specification makes keypress event obsolete: browsers should continue to implement it to keep compatibility with old code
  • The input event is part of HTML5 FormEvents
  • When you want to know which key was pressed use keydown or keypress events's keyCode property.


DOM Level 3 MutationEvent: occur for a modification of DOM structure or DOMnode
type event description
DOMNodeInserted
DOMNodeRemoved
DOMSubtreeModified
DOMNodeInsertedIntoDocument
DOMNodeRemovedFromDocument

Usage:

  • Adding DOM Mutation event listeners to a document can lead to a significant performance penalty. (IE9)
  • They have been deprecated in favor of DOM4 Mutation Observers.

W3C HTML5 Events

HTML5 FormEvents: occur when a user interacts with a form element
event type event description
input Fires when value in <input> or <textarea> or element with contenteditable attribute has changed (IE9+)
change Fires when user makes a change in the value of select box, checkbox or radio button ha changed (IE9+)
submit Fire on the node representing the <form> element, when the form is submitted.
reset User clicks on reset button
cut User cuts content from a form field
copy User copies content from a form field
paste User pastes content into a form field
select User selects text in a form field

Usage:

  • Do not use click event in place of the change event, because user may not be using mouse.


HTML5 events with different interfaces: occur when window's or document's state changes
type event description target
DOMContentLoaded Event fires when the DOM tree is formed, but linked resources (CSS, JS, images) are still being loaded. (IE9+) document, window
readystatechange Fires fires when document's readyState property is changed. (Can be used as an alternative to the DOMContentLoaded for olderIE) document, XMLHTTPRequest
hashchange Event fires when the URL hash changes. URL's hashs AKA anchors link parts of a document within a page. (IE8+) window
beforeunload Event fires before the page is unloaded. It shows a dialog box to the user. window

Example: (HTML5 FormEvent) input event

Example: (DOM4 FocusEvent) blur and (HTML5 FormEvents) change events

Example: (DOM2 MouseEvent) mouseover, mouseout and mousemove events

No comments :

Post a Comment