What is the DOM

DOM full name Document Object Model, that is, the Document Object Model, starts with the root element to expand into a tree, describes the method and interface to process web content.

What are DOM events

For a simple example, click is an event, followed by a function that performs the corresponding function. The event can be triggered in any part of the Document structure, either by a user action or by the browser itself. Events are not just triggered and terminated in one place; They flow through the Document and have their own life cycle.

DOM event model and DOM event mechanism

The DOM event model itself explains that elements have a binding function execution order.

As shown in the figure above, when is clicked, each node above it, from to the Window, can add a click event to execute the function. Functions are executed in one of two ways:

  1. One is fromWindowto<tr>This behavior is called capture
  2. One is from<tr>``WindowThis behavior is called bubbling

Which method is used for the click event is controlled by the third parameter to the addEventListener

E.adddeventlisenter ('click',f2,true) // true Executes function in capture direction e.adddeventlisenter ('click',f2,false) // false executes function in bubble directionCopy the code

The default value of the third parameter is false, and the default is capture first and bubble later

Prevents events from bubbling

E.toppropagation () can interrupt bubbling

The capture cannot be cancelled because the DOM is a tree and the root must be there. Only by following the roots.