Example Analysis of js event flow, event delegation and event Phase

This article mainly introduces the js event flow, event delegation and event phase example analysis, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

1. Event flow

Interaction with javascript in HTML is event-driven, such as mouse click event onclick, page scrolling event onscroll, and so on. Event listeners can be added to the document or elements in the document to subscribe to the event. If you want to know when these events are called, you need to understand the concept of "event flow".

The event flow describes the order in which events are received from the page, and the DOM2-level event flow consists of the following phases. Event capture stage, target stage, event bubbling stage

(1) event capture means that the least specific node should receive the event first, while the most specific node should receive the event last. For example, clicking on a div on the page triggers elements in the order of document, html, body, and div. You can block the occurrence of events at this stage

(2) in the target stage, that is, the actual target element is captured.

(3) Propagation in the direction of events in the bubbling phase, from div target elements to document elements

2. Event handler

Event handlers are functions called in response to clicks, loads, mice, and so on. There are many ways to specify event handlers.

Specify the event handler through the html element attribute