Common Events vs DOM Events Model

The world of web development is filled with various events that occur when users interact with web pages. These events can be classified into two main categories: common events and DOM events. In this article, we will delve into the differences between these two types of events, providing examples and explanations to enhance your understanding.

Common Events

Common events are high-level events that are supported by most browsers. They are typically associated with user actions, such as clicking, hovering, or scrolling. Some common events include:

• Click: This event is triggered when a user clicks on an element.
• DoubleClick: This event is triggered when a user double-clicks on an element.
• Hover: This event is triggered when a user moves the mouse over an element.
• Scroll: This event is triggered when a user scrolls the page.

Common events are easy to use and can be added to elements using the addEventListener() method. For example, the following code adds a click event listener to the button element:

const button = document.querySelector('button');

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

DOM Events

DOM events are low-level events that are fired by the browser when specific actions occur in the document. They are more granular than common events and provide more detailed information about the event that occurred. Some common DOM events include:

• DOMContentLoaded: This event is triggered when the initial HTML document has been completely loaded and parsed.
• Load: This event is triggered when the entire page, including all resources, has been loaded.
• Mouseenter: This event is triggered when the mouse pointer enters an element.
• Mouseleave: This event is triggered when the mouse pointer leaves an element.

DOM events can be added to elements using the addEventListener() method, just like common events. However, DOM events require a more specific event type to be specified. For example, the following code adds a mouseenter event listener to the button element:

const button = document.querySelector('button');

button.addEventListener('mouseenter', () => {
  console.log('Mouse entered button!');
});

Differences Between Common Events and DOM Events

The main difference between common events and DOM events is the level of detail they provide. Common events are high-level events that are easy to use and understand. DOM events are low-level events that provide more detailed information about the event that occurred.

Another difference between common events and DOM events is the way they are propagated. Common events bubble up the DOM tree, meaning that they can be triggered on an element and then propagate to its parent elements. DOM events do not bubble up the DOM tree. They are only triggered on the element that the event occurred on.

Conclusion

Common events and DOM events are two important types of events that are used in web development. Common events are easy to use and can be used to handle common user actions, such as clicks, hovers, and scrolls. DOM events are more granular and provide more detailed information about the event that occurred. They are typically used for more complex interactions, such as drag and drop.