Briefly describe the DOM event model or DOM event mechanism

The DOM event model is divided into capture and bubbling. Propagation between child elements and parent elements after an event occurs. This spread is divided into three stages.

(1) Capture stage: the stage where the event is propagated from the Window object top-down to the target node;

(2) Target stage: the stage when the real target node is processing events;

(3) Bubbling stage: the stage in which the event propagates from the target node to the Window object from bottom to top.

1. Events bubble up

Event bubbling is a stream of events in IE, which are received by the most specific element and propagated up the hierarchy, occurring at each node until propagated to the Document object, or bubbling to the Window object in browsers like Chrome (easy to remember, like a bubble in water).

2. Event capture

Event capture was the brainchild of the Netscape browser development team, which, interestingly, is the opposite of IE. That is, from the least concrete node to the most concrete node, it usually propagates from the Document object, but very few people capture it with events, and events bubble up a lot.

3. DOM event flow

The event flow defined here has three phases: the event capture phase, the target phase, and the event bubbling phase.

Capturing works from top to bottom. The event goes from the Window object, then to the Document (object), then to the HTML tag (get the HTML tag from the Document.documentElement), then to the body tag (get the body tag from the document.body), Then follow the normal HTML structure of the layer down, and finally reach the target element. The event bubbling process is the inverse of event capture.

* Capture cannot be cancelled, bubbling can. E.toppropagation () is generally used to encapsulate some separate components

What is the capture phase and what is the bubble phase

Event.target vs. event.currenttarGet

A special case

Briefly describe event delegation

Event delegate is also called event delegate. In terms of advanced programming in JavaScript, event delegate is to manage all events of a certain type by using event bubble and specifying only one event handler.

Why use event delegate:

  • Reduce memory consumption and improve performance

Suppose we have a list with a large number of list items, and we need to respond to an event when each list item is clicked

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item 1000000</li>
</ul>
Copy the code

Copying code that binds a function to each list item is very memory intensive and requires a lot of performance in terms of efficiency. Using event agent, we only need to give the parent container ul binding approach, so no matter which a descendant elements, click will be according to the transmission mechanism of transmission of bubbling, click behavior triggers the container, and then the corresponding method to carry out, according to the event source, we can know is who, click to do different things.

  • Dynamically bound events

By user operation in many cases, we need to dynamically add or delete a list item element, if give each child element binding events at the beginning, then in the list of changes, just need to give new elements of the binding event, to tie events is about to delete the elements of the solution, if use event agency will save a lot of trouble.

How to implement

Let’s delegate the li element’s event to its parent element

// Bind the event document.getelementById ('list').addeventListener ('click', Function (e) {/ / compatibility with var event = e | | window. The event; var target = event.target || event.srcElement; / / determine whether match the target element if (target. The nodeName. ToLocaleLowerCase = = = 'li') {the console. The log (' the content is: ', target. The innerHTML); }});Copy the code