Tag Archives: Web Development

The Document Object Model (DOM)

This is a simplified view of the Document Object Model (DOM). Each box represents an object in the DOM tree structure. There are additional objects in the DOM that are not listed here. I hope to add them to an expanded image later.

The Document Object Model (DOM)

The Document Object Model (DOM)


HTML Event Handlers

This is a brief listing of HTML Event Handlers which are used to trigger JavaScript code in web pages:

onAbort The loading of an image has been canceled
onBlur A page element loses focus
onChange The user changes the content of a form field
onClick The user uses the mouse to click on a page element
onDblClick The user uses the mouse to double-click on a page element
onError An error occurs when loading a page or an image
onFocus A page element gets focus (selected)
onKeyDown The user presses a keyboard key
onKeyPress The user presses or holds down a keyboard key
onKeyUp The user releases a previously pressed keyboard key
onLoad A page or an image finishes loading
onMouseDown The user presses a mouse button
onMouseMove The mouse cursor moves
onMouseOut The mouse cursor moves off of a page element
onMouseOver The mouse cursor moves over a page element
onMouseUp The user releases a previously pressed mouse button
onReset The form is reset; the reset button is clicked
onResize A window or frame is resized
onSelect The user selects some text on the page
onSubmit The form is submitted; the submit button is clicked or the enter key is pressed
onUnload The user leaves the current page

Note: Event Handlers that are device-non-specific are preferred to those that are device-specific. So, for example, use onFocus and onBlur instead of onMouseUp and onMouseDown since the latter are triggered specifically by using the mouse. Keyboard presses will not trigger such an event. Using onFocus and onBlur will make the event device neutral and will be triggered by both the keyboard and the mouse.

Remember, the above event handlers are actually part of XHTML (since HTML 4) not JavaScript. JavaScript now boasts an extended list of event handlers. See http://www.java2s.com/Code/JavaScript/Event-onMethod/CatalogEvent-onMethod.htm for details.

Mozilla Firefox Web Development Add-Ons

For web development, you just can’t beat Mozilla Firefox and the excellent community extensions available specifically for that purpose. Here’s a short list of my favorite add-ons for web development:

(Go to https://addons.mozilla.org/ and install the following:)

  • Colorzilla
  • DOM Inspector
  • Firebug
  • FirefoxView and IE View
  • FireFTP
  • IE Tab
  • Image Zoom
  • McAfee SiteAdvisor
  • MeasureIt
  • Nuke Anything Enhanced
  • Print Preview
  • Total Validator
  • Web Developer
  • YSlow