What is HTML DOM?

When a web page is loaded, the browser creates a Document Object Model of the page.
The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.
The HTML DOM is a standard object model and programming interface for HTML. It defines:
  • The HTML elements as objects
  • The properties of all HTML elements
  • The methods to access all HTML elements
  • The events for all HTML elements


What is HTML DOM - progrramers exlained
HTML DOM TREE STRUCTURE



What is HTML DOM Event?

HTML DOM Events allow JavaScript to register different event handlers on elements in an HTML document. Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button).


What is HTML DOM Event? Explanation Image
HTML DOM Event

What is an EventListener?

An event listener is a procedure or function in a computer program that waits for an event to occur. For examples - the user clicking or moving the mouse, pressing a key on the keyboard, or an internal timer or interrupt are events.

What is Dynamic HTML DOM?

An HTML DOM or DOM tree created with the combination of HTML and JavaScript after page loaded is referred as Dynamic HTML DOM. Dynamic HTML can be created after when the client side scripting language event occurred. For example – document.createElement(TAGNAME);

What is Event delegation?

Event delegation is the process of handling events at a higher level in the DOM that where they were first triggered, thanks to behavior known as Bubbling. For example - when an element on the page is, clicked, then a click event is fired on that element but it doesn’t stop there. The click event “bubbles up” the DOM tree, triggering the click events on any of the originally clicked element’s parents that are listening for one.

What is bubbling?

When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors. The process is called “bubbling”, because events “bubble” from the inner element up through parents like a bubble in the water.

What is bubbling
HTML DOM Event : Image courtesy W3.org


Above image describe the three phase of HTML DOM Event:
  • Capturing – The event goes down to the element (very rare use)
  • Target – The event reach the target element
  • Bubbling – The event bubbles up from the element

Why EventListeners don’t work on Dynamic HTML DOM?

HTML DOMs created dynamically don’t have its own Event Handlers because they aren’t static part of the DOM tree hence simple EventListeners cannot target it to fire the function but they are part of the loaded document, therefore to handle the events, we have to use Event Delegation to the HTML Elements appended dynamically.
Next post will elaborate “How to Create Event Listeners for Dynamic HTML DOM?”

Related Topics

progrramers-logo

progrramers

Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment:

3 comments:

  1. I’ve been surfing online more than three hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. In my opinion, if all webmasters and bloggers made good content as you did, the web will be a lot more useful than ever before. www.dynamicmarketing.sg/seo-consultant-singapore

    ReplyDelete
  2. Impressive.you story always bring hope and new energy.keep up the good work.
    learn 360digitmg data science coursesin India

    ReplyDelete