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.

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:

7 comments:

  1. I have to search sites with relevant information on given topic and provide them to teacher our opinion and the article.
    360DigiTMG data analytics courses in hyderabad
    data science courses
    business analytics course

    ReplyDelete
    Replies
    1. The effectiveness of IEEE Project Domains depends very much on the situation in which they are applied. In order to further improve IEEE Final Year Project Domains practices we need to explicitly describe and utilise our knowledge about software domains of software engineering Final Year Project Domains for CSE technologies. This paper suggests a modelling formalism for supporting systematic reuse of software engineering technologies during planning of software projects and improvement programmes in Final Year Projects for CSE.

      Software management seeks for decision support to identify technologies like JavaScript that meet best the goals and characteristics of a software project or improvement programme. JavaScript Training in Chennai Accessible experiences and repositories that effectively guide that technology selection are still lacking.

      Aim of technology domain analysis is to describe the class of context situations (e.g., kinds of JavaScript software projects) in which a software engineering technology JavaScript Training in Chennai can be applied successfully

      The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

      Delete
  2. 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
  3. Impressive.you story always bring hope and new energy.keep up the good work.
    learn 360digitmg data science coursesin India

    ReplyDelete
  4. Attend The Data Analyst Course From ExcelR. Practical Data Analyst Course Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The Data Analyst Course.
    Data Analyst Course

    ReplyDelete