This is the 24th day of my participation in the August Text Challenge.More challenges in August !

Before we talk about the flow of events, what is an event?

The event

The interaction between JavaScript and HTML is achieved through events. Events are specific moments of interaction that occur in a document or browser window. You can use listeners (or event handlers) to schedule events so that the appropriate code is executed when the event occurs. In layman’s terms, this model is essentially an observer model.

Flow of events

Events are triggered when we have certain types of interactions on a web page. When an event is generated by a node, it is propagated in a particular order between the element node and the root node, and is received by all nodes along the path. This propagation process is called DOM event flow.

Early IE and Netscape had a different concept of event flow:

IE’s event flow is event bubbling, that is, propagating from the bottom up, from the target-triggered elements up to the Window object. Netscape’s flow of events is event capture, propagated hierarchically from document to target elements. However, earlier versions of IE do not support event capture, so it is rarely used

ECMAScript further regulates event flow in DOM2, which is a combination of the two. There are three stages:

  • (1) Event capture stage
  • (2) In the target stage
  • (3) Event bubbling stage

DOM classification

Level 0 DOM

Hang event listeners directly on the node, and this in the callback will point to the current node. This approach is what is commonly referred to as the level 0 DOM. Ex. :

<input class="myButton" type="button" value="add" onclick="alert('hello');" >  
Copy the code

The DOM level 1:

The DOM1 level mainly defines the underlying structure of HTML and XML documents. It is equivalent to some usage that we have accepted before standardization. The level 1 DOM standard does not define event-related content, similar to level 0

The DOM level 2

In the level-2 DOM, in addition to the target node, each ancestor node of the target is allowed the opportunity to process that event.

Level 2 is the event capture phase, the target phase, and the event bubbling phase

Dom2-level event handlers, which refer to operations that add and remove event handlers: addEventListener(), removeEventListener()

Level 3 DOM

XPath modules and Load and Save modules have been added to the DOM3 level. Added some new events: onInput, Location, key

Event delegation

If there are multiple DOM nodes that need to listen for events, binding the listener function to each DOM can greatly affect page performance because we optimize it through event delegates, which take advantage of bubbling

Advantages:

  1. Improved performance: Each function takes up memory, so adding an event handler to broker all events takes up less memory.
  2. Dynamic listener: Dynamically added elements can be automatically bound using event delegate, that is, new nodes can have the same events as other elements without being actively added.

To prevent a bubble

  1. event.stopPropagation();

    Prevents event bubbling during event processing, but does not block default behavior (can perform hyperlinked jumps)

  2. return false;

    Prevents event bubbling during event handling and also prevents default behavior (cannot perform hyperlink jump)

  3. event.preventDefault();

    Event processing does not block event bubbling, but blocks default behavior