Modelling with Document Object Model
Document object model is the representation of all the objects of the HTML page as a tree structure. There is no specification on the documents be implemented as tree or collection of trees. It is an abstract interface which created by the browser when the page is loaded.
DOM generate events which are activities of the browser or the browser user that are detected and computation is provided in response to those activities by the java script, being a event driven programming language. The event is the specific activity taking place, whereas event handlers is the script that is executed in response to those activities.
Some of the example of events can be click, mousemove, key press, key down. The difference between key press and key down is- when the key is pressed, the key press event occurs, whereas when the key is pressed and released the key down event has taken place. These events fire the event handler. There occurs a confusion when the parent and child node both have event handlers. When the child node event has been triggered which event handler should be fired. The elements need not be parent and child, they can be nested elements as well.
element 2 event handler is fired first and then element 1 event handler is triggered. This approach is known as event bubbling, the reverse triggering that is first element 1 event handler is triggered and then element 2 event handler is triggered it is known as event capturing.
In some of the situation we desire the event handling not to take place, in such cases preventDefault method could be used to prevent the action of the handler. In event bubbling, to stop the event from further propagation stopPropagation method is used on the event object.
This post realizes the importance of DOM and more details can be found at http://www.w3schools.com/js/js_htmldom.asp.