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
![]() |
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).![]() |
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.![]() |
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
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
ReplyDeleteImpressive.you story always bring hope and new energy.keep up the good work.
ReplyDeletelearn 360digitmg data science coursesin India
Liên hệ Aivivu, đặt vé máy bay tham khảo
ReplyDeletedat ve may bay tu han quoc ve viet nam
vé máy bay hà nội sài gòn vietjet
giá vé máy bay đi hà nội tháng 12
lịch bay hà nội đà lạt
vé máy bay đi huế vietnam airlines
Informative blog
ReplyDeletedata science course in india