Mastering JavaScript Events and DOM Manipulation

Posted on Jun 11, 2026 in Computers

JavaScript Event-Driven Programming

JavaScript uses an event-driven programming model. When a user clicks a button, moves the mouse, or types in a form, the browser fires an event. JavaScript allows you to intercept these events and execute code in response.

1. Core Concepts: Events, Handlers, and Listeners

To work with events, you need to understand three interconnected terms:

• Event: The signal that something happened (e.g., click, keydown, submit, DOMContentLoaded).
• Event Handler / Listener: The function that executes when the event occurs.

While “handler” and “listener” are often used interchangeably, they represent different ways to write the code:

HTML Attribute (Avoid This)

You can embed JavaScript directly in HTML. This is outdated, hard to maintain, and mixes presentation with logic.

<button onclick="alert('Clicked!')">Click Me</button>

DOM Property (Old School)

You assign a function to an element’s event property. It’s cleaner than HTML attributes, but you can only assign one handler per event. If you assign a second one, it overwrites the first.

const btn = document.querySelector('button');
btn.onclick = function() {
    console.log('This will be overwritten');
};
btn.onclick = function() {
    console.log('Only this will run!');
};

Event Listeners (The Modern Standard)

Using addEventListener() is the best practice. It allows you to attach multiple listeners to the exact same event and gives you fine-grained control over how the event behaves.

const btn = document.querySelector('button');
function logHello() { console.log('Hello'); }
function logWorld() { console.log('World'); }

// Both of these will run when clicked!
btn.addEventListener('click', logHello);
btn.addEventListener('click', logWorld);

// You can also easily remove them later
btn.removeEventListener('click', logHello);

2. Event Flow: Bubbling and Capturing

When you click a button inside a div, you are technically clicking the div and the body as well. Event Flow describes the order in which elements receive the event. The standard DOM Event Flow happens in three phases:

1. Capturing Phase: The event starts at the very top (window, document) and trickles down through the ancestors to the target element.
2. Target Phase: The event reaches the actual element that triggered the action.
3. Bubbling Phase: The event bubbles up from the target element back to the root (window). This is the default behavior for most JavaScript events.

Controlling the Flow

By default, addEventListener only listens to the bubbling phase. You can pass a third argument to force it to listen during the capturing phase instead.

// Listens during Bubbling (Default)
element.addEventListener('click', callback, false);

// Listens during Capturing
element.addEventListener('click', callback, true);

Stopping the Flow

If you want to prevent an event from bubbling up to parent elements, use event.stopPropagation().

button.addEventListener('click', (event) => {
    event.stopPropagation();
    console.log('Button clicked');
});

3. Introduction to the DOM

The Document Object Model (DOM) is the backbone of dynamic web development. It acts as the bridge between your web page and your programming language, allowing you to change content, styles, and structure on the fly.

The Concept

When a web page loads, the browser parses the HTML and creates a programming interface known as the DOM. It represents the document as a hierarchical tree of objects where every tag, attribute, and piece of text becomes a “node.”

Types of DOM

• Core DOM: The standard model for all document types (HTML, XML).
• XML DOM: The standard model specifically for XML documents.
• HTML DOM: The standard model for HTML documents, adding HTML-specific objects and properties.

4. DOM Standards and Methods

To interact with the DOM, you use methods to find or manipulate elements.

Essential Selecting Methods

5. Manipulating Documents

Once you select an element, you can change its content, structure, or styling.

• Changing Content: Use .textContent (safe for text) or .innerHTML (renders HTML tags).
• Changing Styles: Use the .style property.
• Creating & Appending Elements:

const newPara = document.createElement('p');
newPara.textContent = "Hello, I am new here!";
const container = document.querySelector('#main-container');
container.appendChild(newPara);

Handling Images

const myImage = document.querySelector('#hero-img');
myImage.src = 'images/new-banner.jpg';
myImage.alt = 'A beautiful new website banner';

Table Manipulation

const table = document.getElementById('myTable');
const newRow = table.insertRow(-1);
const cell1 = newRow.insertCell(0);
const cell2 = newRow.insertCell(1);
cell1.textContent = "John Doe";
cell2.textContent = "Developer";

6. Animation

DOM animation involves changing an element’s style continuously over time. Modern JavaScript uses requestAnimationFrame() for smooth rendering.

const box = document.getElementById('animatedBox');
let position = 0;
function move() {
    position += 2;
    box.style.left = position + 'px';
    if (position < 300) {
        requestAnimationFrame(move);
    }
}
requestAnimationFrame(move);

7. Node and Node-List Handling

Node vs. Element

• Node: Everything in the DOM (tags, text, comments, attributes).
• Element: A specific type of node representing an HTML tag.

HTMLCollection vs. NodeList