The DOM And Events

The Document Object Model (DOM) is the representation of HMTL, XHTML and XML files in the form of a tree structure that can be navigated to find and interact with individual elements. Every element in a DOM is called a node. Since the DOM is a tree it is arranged so that:

  • It has one root node (the parent node that everything else is under)
  • A node my have many to no children nodes
  • A node may only have one parent node (apart from the root)
  • Any text or attributes are individual nodes (such as <p>Hello</p> is a <p> node and a text node which contains Hello)

When interacting with elements on a page such as text areas there are events that can be used to determine when the user has done things such as press down on a key. There are three important events to take note of, they are:

  • keydown – keydown works when the user presses down on a key and repeats as long as the user keeps the key pressed down.
  • keyup – keyup activates after the user has released the key and the action of the key has taken place.
  • keypress – keypress comes into play after a character has been typed from the user pushing down on a key

“In order to understand the difference between keydown and keypress, it is useful to understand the difference between a “character” and a “key”. A “key” is a physical button on the computer’s keyboard while a “character” is a symbol typed by pressing a button.  In theory, the keydown and keyup events represent keys being pressed or released, while the keypress event represents a character being typed. The implementation of the theory is not same in all browsers.” (KeyPress, KeyDown, KeyUp – The Difference Between Javascript Key Events)

Event bubbling occurs when a user has an event which calls two functions at the same of which one is nested inside the other. Event bubbling is to do with the order in which the functions are executed, from the outside in or the inside out? Generally all browsers apart from Netscape Navigator work from the inside out (event bubbling) where as Netscape Navigator works the opposite of outside in (event capturing).

An event can be cancelled if it is able to be (which can be found out through .cancelable) at an element by calling the method .stopPropagation() for browsers other than Microsoft Internet Explorer where the command event.cancelBubble = true has to be used.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: