What is an event model?

In the distant past, the dominant browsers were owned by Microsoft and Netscape. They disagreed on a question. So here’s the code,

<div class="father"> <div class="son">Copy the code

In this case, both divs have listener functions bound to the click event, so when clicking on son, it counts as clicking on father. So the question is whose listener is executed first?

Eventually, the W3C came up with a standard. All browsers are required to support both capture and bubble call sequences.

This is the event model, which addresses the problem of listening for the order in which functions are called.

Capture and bubble

Capture phase: search for listener function from outside in, execute if found, skip if not.

Bubble stage: look for listener function from inside out, execute if found, skip if not.

All event triggers go through a capture and bubble process. Window -> innermost layer -> Window

At this point, the developer can decide at what stage the listener is executed.

addEventListener()

This method is an API that the DOM provides to add listener functions to an element’s events.

Element. addeventListener(event name, listener function,options object, to what stage)

  1. The first parameter is the event name. Due to more events, here is not a repeat. Refer to MDN for details. Event reference
  2. The second argument is the listener function. When the event is fired, the function is called back. This function takes an event parameter that contains information about the event.
  3. The third argument is the Options object that configures the listener function. For example, a listener function can only be called once.
  4. The third parameter is of type Boolean. Do not write Defaults to false to add listeners to the bubbling phase. True: add to capture phase.

Graphic: How does the event model find listener functions and execute them

The developer decides which stage to place the listener in by setting the addEventListener parameter.

When true, it is the capture phase, which is on the left side of the graph (red arrow). When false, it is the bubbling phase, which is on the right side of the graph (green arrow).

The TD element has a listener function tdListener and the table has a listener function tableListener. Put it all in the capture phase.

When we click TD, the browser looks for a listener from the window from the outside in (to the end of TD, shown in the red arrow). When it finds a listener for table, it executes a tableListener. Then the TD element also finds the listener and proceeds to execute the tdListener. At this point, you have reached the innermost layer, so start from the innermost layer and look for the listener (the green arrow part) from the inside out (window end). Since there are no listener functions, skip them all. The flow of an event model is complete.

Prevents events from further spreading stopPropagation

event.stopPropagation(); On the listener function, the event propagation can be blocked by calling the stopPropagation method of parameters. That is, the event is over, and no more listener functions are to be found.

Many people believe that stopPropagation can only prevent the propagation of bubblingevents. In fact, it is clearly explained in MDN and the code running effect clearly tells us that this method can also block the propagation of events in the capture phase. However, it is true that since most listener functions are added to the bubble phase, stopPropagation is usually only used to prevent bubbles.

Note: All event listeners can prevent further propagation of the event

Prevents the default behavior of events

What is the default behavior? When we click a tag, the clicking event of a tag will trigger the jump behavior by default. This behavior is the default behavior. Sometimes we don’t want it and we can cancel it.

event.preventDefault(); On the listener function, call the Event preventDefault method to prevent the default behavior. But there are a few caveats:

  1. This method simply blocks the default behavior and event propagation has no effect.
  2. Not all events can cancel the default behavior. For example, scroll event.

conclusion

When you understand why you have event models, learn to do more with less. The event model addresses the problem of listening for the order in which functions are called. The API revolves around this issue. Due to the lack of space, this article does not talk about event delegation (event proxy). In fact, its principle is very simple that it uses the operation mechanism of event model to solve other problems (binding events to multiple elements and binding events to non-existing elements). I’ll go into more detail in the next article. Thank you for reading!