Document Object Model (DOM) - Complete Guide - Part 2 (2025)

DOM Events are used to notify us (developers) of interesting things that have taken place.

Each event is represented by an object which is based on the Event interface, and may have additional custom fields and/or functions used to get additional information about what happened. Events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.

It is a massive topic, and thats why this first section is quite lengthy. We are going to look at a lot of events in this course, and will constantly look at examples of how we can apply what we've learnt to real web applications.

I truly hope you enjoy this section.

See you in the lecture!

Sometimes we stand so close the wall, we can't see the painting.

This is a quick look at Events, and how it relates to JavaScript.

The interaction of JavaScript with HTML is handled through events. We know this.

And, events are actions that occur when either the user or the browser itself manipulates the page. We also know this.

But what you may not have known is that each event requires 2 things to properly function - an event listener and an event handler.

This lectures discussed these two very important things.

A lot of my students get confused about the difference between listeners and handlers - which is exactly the reason for this short and sweet article.

Enjoy!

As a web developer. you may be wondering why you need to learn about old-school approaches such as the inline event listener.

Well, my philosophy is that you need to understand the old, in order to understand the new. Yes, there are limitation to this of course - none of us want to learn web development techniques that are out-dated and redundant. But, you will commonly see inline event listeners in your career, so this becomes really important for you to understand. It also sets the base for the new addEventListener() method which we will be getting into shortly.

Sometimes you'll see me omit the quotation marks when writing an inline event listener. In the previous example you saw this when I wrote the boom() function without quotation marks.

This can confuse a lot of people, including developers.

But let me explain to you why this is valid HTML code.

You may be thinking that because the inline event listener is old-school, that you don't have to bother learning about it.

But you would be wrong.

Read this article to find out why.

Adding event listeners to the DOM via an inline property is yet another method we need to look at.

It is very similar to inline event listeners.

Under both approaches, we're adding an event listener as an attribute to the actual DOM element we're attaching it to. The major difference is that here, we're using JavaScript to do so. The major benefit with this is that our HTML source code can be kept super clean and clean.

Now we're talking honey!

This is the newest method available to us, and is what we'll be using for most of this course.

Its major benefits over the previous 2 approaches are: 

1. it attaches an event listener and handler to an element without overwriting existing event handlers; and

2. you can add numerous event handlers to one element; and

3. you can add many event listeners of the same type to one element, i.e you can have two "click" events.

Take a step back, and lets recap on what we've just learnt - the 3 ways we can add event listeners to an element.

As we've seen, there are different ways we can add an event listener to the DOM.

But, pictures are worth a thousand words, so here is an infographic that summarizes these methods.

I don't want you to lose sight of why we are learning about events. This is just a quick break and chat about where we've come from, and why web developers need to understand events in order to master front-end web development.

Have you thought about how an event listener actually works? Does it sit there and constantly check if an event has been fired? Although this may seem to be the most intuitive process, its not how listeners actually work.

This brief article discusses, at a very high level, how an event listener works.

I hope you find it really interesting.

We've seen the high level description of an inline event listener, but now its time to get dirty and dig into this in a bit more detail.

To become an awesome programmer, you need to understand things in detail.

I hope you're enjoying this course so far and learning a ton.

Keep motivated.

Its test time!

We're now going to see a practical example of coding a website.

Yes, its going to be very simple. We are only going to have 2 buttons. And each button will change the text color on our page.

Although this is a simple example, bear in mind we're only getting started. By the end of this section we're going to cover a few more advanced examples - you'll emerge an expert programmer.

Lets write our code together and set up our test file.

If you really don't feel like coding alongside with me, then you can just download this task-code.html file and start there.

Enjoy!

We now want to finish off this exercise, by making our buttons work.

Remember what it is we're doing.

We have our buttons. We have our paragraph tags.

Now all we have to do is add an inline event listener to our buttons. We need to 'listen' for a 'click' event. When this click event is fired, then we need to change the color of our heading and paragraph tags.

Make sense? 

Using inline properties to attach event listeners to the Document Object Model is very similar to using inline event listeners.

But in this instance, we use JavaScript to attach the listener to the element.

Importantly, under both approaches, we're attaching the event listener as a property (or attribute) the element.

Inline event listeners are easy to insert into your code, but they are not the best way.

There is a difference between DOM properties and HTML attributes. This short article explains why.

This is quite a fun test, because we are going to dynamically display content when you click a button.

But we also use CSS animation to make the transition less harsh.

As always, I love writing code with you. I highly encourage you to follow along.

But if you are really advanced and don't want to code alongside me, then feel free to download the set-up code attached to this lecture.

Its solution time ;)

We have to attach an inline property listener to our <a> element. We do this by using JavaScript.

The last part is now to change the styling of the entire <div> element thats wraps all of our content. We do this because at the moment we've given this wrapper a max-height property. This max-height property needs to expand when the <a> tag is pressed.

Don't worry if you're still not 100% sure how its done.

Lets go through it together in this lecture.

So far, we've been attaching event listeners inline and using object properties. But these types of handlers and listeners are not great - they do not keep our code clean, and you can only attach one handler at a time.

To get around this, the more modern approach is to use the addEventListener() method.

As we have just seen, the event handler function is a callback function.

But what exactly does this mean? 

This lecture will tell you.

A "callback" is any function that is called by another function which takes the first function as a parameter. A lot of the time, a "callback" is a function that is called when something happens. That something can be called an "event" in programmer-speak.

This is another fun test.

This time, we want to allow the user to click on a circle, and randomly change its color.

These tests are very important for you to attempt. It will dramatically improve your web development skills.

Enjoy!

To be clear, this is what I want you to do. Good luck.

As a full stack website developer, you need to be able to code front end as well as back end applications.

Thats why I always like coding the entire exercise from scratch, and encourage you to do the same.

But if you really don't want to, then I have attached the code to this lecture, so you can pick up from here.

Did you give the test a go? I hope so.

Where do we begin? 

The best approach at solving a problem is to break it up into little steps.

We know that we want to trigger a change of color when the user clicks the circle. So, the first step is to grab the circle element in the DOM. We can put this circle in a variable.

We then use JavaScript to attach a click event listener to this circle.

We use the addEventListener() method to do so.

We can then define our handler function to handle the code that executes when the click event is fired.

And this is where the tricky part of our code lives.

Remember, we're using hexadecimal format to define the color on our circle. We know that we have access to over 16m different colors, so we need a way to randomly generate a hex value.

Don't worry, there are a few bonus lectures below that go into detail about how digits, bytes and hexadecimals work.

It can be a little confusing if you want to pass in arguments to the callback function when using the addEventListener method.

Let me explain the problem and how you can solve it.

For a CSS hex number to work, you need to have 6 digits.

Every color on the web can be represented in many different ways.

For example, we can type the word "blue", but we can also write blue as #0000ff, #00f, rgb(0,0,255) and many other ways. It doesn't matter which one you choose as long as it's a valid color.

Importantly, you can apply any of these ways to define a color to a website or blog. It comes down to personal preference.

A little bit of FYI, did you know: 

• to set a background color, use background-color.

• to set the text color, use color

• to set a border color, use border-color.

A bit is a binary digit, the smallest increment of data on a computer. It represents only 2 values - either a 0 or 1 that correspond to the electrical values of off or on, respectively.

Because bits are so small, you rarely work with information one bit at a time.

Bits are usually assembled into a group of eight to form a byte. A byte contains enough information to store a single ASCII character, like "h".

We've seen that each hexadecimal color (Red, Blue or Green) is represented by a byte.

Confused? 

Don't panic, lets jump into it now.

As a developer, it can get quite complex and confusing ... thats why I always like taking a step back in strategic locations. This is one of those strategic locations.

Remember what we've done.

We had to generate random values in order to produce random colors for our circle.

In our Math function, we produced a random value between 0 and 16,777,215.

All we're trying to do is understand where this number comes from.

These are bonus lectures and definitely not required in order for you to master the Document Object Model.

We're almost finish learning about events within the DOM.

The last part of our custom function was taking our randomly generated value, and converting it to hex format using JavaScript's toString() method.

Importantly, every object has a toString() method that is automatically called when you require the object to be represented as a text value or when an object is referred to in a manner in which a string is expected.

We ran pretty quickly through the toString() method.

But let me stop and explain it in a little more detail.

Bravo!

You've just completed the first section! And we're only just getting warmed up.

To recap, web events are just things that happen in our browser. Importantly, when an event happens, we can ask our browser to tell us about it. We do this so that we can respond to these events in some way. For example, if the user clicks a button, you might want to respond to that action by displaying a message.

There are a number of ways in which you can listen to events on a web page. In this section, we studied the 3 most popular ways, and we also discussed the preferred approach.

But why am I rambling on? You already know all this.

Its time to jump into this fun quiz.

Enjoy!

We've learnt how to attach event listeners and handlers to different DOM elements, but now we're going to dig deeper and veer away from the pure 'click' event.

As I've mentioned a few times, there are many different types of events.

This section goes further though, we we look at other areas of programming where events are relevant, and also look at where events themselves come from.

Enjoy!

I must take a quick pause here and make it clear that we are dealing with events in the context of the web, but these are not the only types of events we have.

What you learn in this course will help you in other areas of development, such as using Node.js.

This lecture explains why.

Before we go further, lets do a quick example of a click event. This lecture is building the HTML.

This is the final part of the example, where we add our click event listener onto a button and write JavaScript.

A student asked me why the previous example doesn't work when you wrap all of the code within a <form> element. I thought it was such a great question that I decided to write this very quick article.

The most common event you'll come across is the click event. Its also one of the easiest to understand.

But rest assured, this is not the only event type. There are lots of different event types given to us automatically by the DOM. This means we don't have to do extra coding - we can access and listen to them from the get go. Some of these events are focus, printing, mouse, tab, touch, resource, etc.

Because there are so many events, we can't talk about all of them.

However, the next best thing is to narrow down the most common that you'll be working with, which is exactly what I've done.

I've put together this lecture to summarize what I think are the most important / common events you'll encounter.

We don't stop there - but in this section we're also going to look at a few examples along the way.

Your browser has many APIs that are running that give you the ability to access many functions straight out of the box (like the Fetch API for example). One of these APIs is the DOM. 

And the DOM gives us access to Events.

The keydown event is fired when a key is pressed.

Its different to the keypress event.

Remember, the keydown event is fired for all keys, regardless of whether they produce a character value.

We've  discussed this before, but I want you to stop here and remember what events are, where they are from, and that some events have different interfaces so that they can give us extra information.

We've looked at the Mouse Event, and the Keyboard Event.

Its now time to look at the Form Event interface.

The best way to learn is through practical examples - that's why this course if full of awesome examples.

In this lecture, I go over what I want us to build together. Enjoy :)

The starting point is to build our skeleton - that is, the HTML and CSS for our form. After we do this, we can start adding events and listening for them.

I highly encourage you to code alongside me when building this form, but if you really don't want to then I have included the HTML and CSS below.

I want to show you how to find forms. Yes, we can use various DOM access methods to do so (such as getElementById() or getElementsByTagName() for example), but there is an easier way when it comes to forms. We can access our document object, and then access a property called forms on it.

This lecture will also show you the default actions of forms.

You'll be coming across many forms in your front-end web development career. That's why I've specifically taken a few lectures to discuss forms in a little more detail. This lecture looks at some of the most common events you'll listen to on forms, such as the submit event, input event, focus event and copy/paste events.

Touch events are only triggered on touch devices - like smartphones and IPADs. We also have window events that can be quite useful, like when the user scrolls down a page, resizes the screen and other things.

This is going to be a fun section, and it's gonna be super practical.

Try to have fun along the way.

In this lecture I show you what we will be doing together. Its a very simple example. All we're doing is listening for a click event on the image, and when that event fires we want to display some text beneath it.

Not that difficult right? 

Lets now include an <img> tag and reference our lovely cat photo. We then need to write our JavaScript - we need to reference the image, add a 'click' event to it, and then define our handler code.

I want us to move away from a click event in this challenge. Instead, lets start using the Mouse event interface to listen for any movements.

Confused? Don't be. Let me show you what I mean.

In this DOM challenge, I want to execute code only when the users mouse moves. I want to structure our code a little differently in this exercise to. You'll soon begin to realize that there are many ways to skin a cat when it comes to coding.

Continuing on from our previous example, I want us now to include a black dot.

The last part of Challenge 2 is to ensure the black dot follows the users mouse.

Up until this point, we've defined a fixed absolute position for the black dot.

We need to somehow access the MouseEvent object, and look for a property within it that gives us access to the users mouse position when the 'mousemove' event is fired.

Makes sense? 

Don't worry if you are still a little unsure. Lets jump into Visual Studio Code and see how its done.

Given what you've learnt so far, I think you're ready to give this challenge a go without me. I want the user to be able to click on the image, and the mustache needs to be placed where that mouse is clicked.

Whenever you are faced with having to do something based on the position of a users mouse, you will very likely need to access the clientY and clientX properties of the Mouse click event.

I know many of these challenges may be simple. But you need to build your skills upon solid foundations for you to master the DOM. Well done for getting through the challenges.

Stay motivated and see you in the next section.

This section is all about the hierarchy of nodes within the DOM. It can be confusing, but it is very useful to know where all of our methods come from.

This is relatively advanced, but as always I will do my best to break it down into a fun and intuitive way.

Before we jump into prototypes and hierarchies, I want to show you why knowing about these things come in handy.

To illustrate the importance of this section, lets create 2 different types of objects - a JavaScript object and a DOM object. Remember, these objects are not the same thing. The one is from JavaScript, and the other is provided to you by the browser.

If you, for example, create a DOM object, and then try and access JavaScript methods on it, you may get errors. And sometimes this will cause you hours of frustration. Therefore, knowing where objects come from and what you're working with can really speed up your coding time and streamline your process.

I was surprised to see how little information there was on the web about these topics. Its very likely that the reason its so difficult is that we're dealing with advanced topics of host vs native objects. But don't worry, that's what I'm here for.

Although I don't want to dive into detail about the shadow DOM in this course, I want you to be aware that it exists.

Host Objects are objects supplied by a certain environment (like your browser for example, or Node.js). They are not always the same because each environment differs.

Native Objects are built-in objects provided by JavaScript. Native objects are also Global Objects because they can be accessed natively from your code straight out of the box.

In this lecture, I also want us to discuss the Window object. Can you guess whether the Window object is a host or native object? Who gives us the window object? 

We know that the DOM has a bunch of objects and nodes that are given to us. And as the previous lecture showed, these node objects are different to JavaScript objects.

But what's very interesting is that objects inherit properties and methods and from other objects ... and this can sometimes lead to weird results.

I want to try and find this createElement() together.

In doing so, I want to illustrate what inheritance means in a practical way.

We've seen that the full set of properties and methods of a given node comes from a concept known as inheritance. And interestingly, the root object for element nodes is the EventTarget node, which gives support for events like the addEventListener() method and others.

Just remember though, that each different object type (element, text, comment etc.) may follow its own different hierarchy.

The practice of DOM Extension refers to adding custom methods and properties to DOM objects.

Sounds like a great idea right? Well, lets discuss this in more detail in the next lecture. In this lecture, lets just wrap our heads around what DOM Extensions are.

We are going to add our own DOM Extensions, and see some of the problems that can occur along the way.

I want to discuss the problems of DOM extensions in more detail.

Firstly, we have to choose the right prototype to attach our custom event to.

Secondly, there are no rules on host objects, meaning it can get pretty messy to change these objects.

And thirdly, the biggest problem is collision risks - overriding some other method that the host object already has.

DOM extensions are often designed for particular use cases. But they should be used with caution.

Pat yourself on the back (if you can)!

Seriously. These are advanced topics that you are beginning to master.

You know the difference between host objects and native objects. You know how to find where methods come from. You've studied the host object hierarchy. And armed with all of this knowledge, we discussed what DOM extensions are and why you should generally avoid them.

Can you begin to see how far you've come? 

And to prove it, I want you to test yourself by answering these few questions.

Enjoy!

This section is very important, and getting pretty advanced. We're going to be talking about 3 important topics: Event Target, Event Capturing and Event Bubbling.

I want to talk about event bubbling - by this I mean the flow of each even through the DOM. Remember, an event is not an isolated event - it has many effects on the DOM.

This lectures covers what happens when an event is fired in the DOM. You'll find out that it first starts at the root of your page, and works it way down to the item that fired the event. It doesn't stop here ... the event then travels back up the DOM tree, all the way home to its root object.

We know that events travel through the DOM. But the question is in which direction (from the html to the target element, OR from the target element to the HTML)?

Well, this is a quick article that explains the history of why there is both capturing and bubbling phases.

As developers, we can choose where to listen for our event - i.e. during the capturing phase, bubbling phase or BOTH.

Lets look at an example of listening to a 'click' event during both the capturing and bubbling phase. We will do this by creating a button and attaching a click event to it via the addEventListener() method.

Lets display the entire bubbling and capturing process by using the for...of loop.

Why do we need to know about capturing vs bubbling? Strictly speaking, you won't really need to know or distinguish between them in most cases. However, understanding bubbling will allow you to utilize something very useful as a programmer known as EVENT DELEGATION.

Sometimes we want to end our event from running through our DOM - we can do this by using the stopPropagation() method.

I now want to grab our event on the button, and stop it from flowing through the DOM.

Blow bubbles, and jump up & down! 

You've done it.

Okay, so maybe we're not going to blow bubbles ... but we have learnt all about bubbling and capturing in the context of the web browser.

These are relatively advanced concepts and if you master them, you'll be well on your way to becoming an awesome developer.

So, grab a coffee, relax, and try your hand at these fun questions about event propagation. 

Good luck!

One of the major benefits of event bubbling is that it gives us access to the practice of Event Delegation. This section is all about event delegation.

This is an introduction to the box challenge, where we will practically apply a DOM technique known as Event Delegation.