Event firing process (event flow)
The first thing you do is you click on an event, and it starts at the outermost layer, goes to the target source, and that process is called event capture, and then it starts at the deepest node of the target source, and it goes all the way up to the Document object, and that process is called event bubbling, and the whole process is called event flow,
Event capture: First a click on the event, the event will occur from the outermost layer up to the most specific element, this process is called event capture,addEventListener takes three arguments, the third argument is true event capture
Usually we register events using addEventListener, and the third argument to this function can be a Boolean or an object. The default is false for the Boolean useCapture parameter, which determines whether a registered event is a capture event or a bubble event. For object parameters, you can use the following attributes
- Capture: Boolean value, same as useCapture
- Once: Boolean value, true to indicate that the callback is called only once, after which the listener is removed
- Passive: Indicates that the preventDefault is never called
Event bubbling: The event starts from the innermost element and propagates up to the Document object. This process is called event bubbling. Onclick takes three arguments, the event bubbling when the third argument is true
Stop event bubbling: * * * * in the W3C standards call e.s topPropagation (), and under the IE set through the window. The event. The cancelBubble = true
Stop event capture: * * * * event in stopImmediatePropagation (), stopImmediatePropagation contains stopPropagation function
Note: Event firing will normally occur in the order above, but there is an exception where if you register both bubbling and capturing events for child nodes in a body, event firing will occur in the order in which it was registered.
Node.addeventlistener (' click', event => {console.log(' bubble ')}, False) node.addeventListener (' click', event => {console.log(' catch ')}, true)Copy the codeEvent delegate (Event broker)
Event delegation leverages the principle of event bubbling by specifying an event handler to manage all events of a certain type
Typically, an event or group of elements is delegated to its parent or outer element, and when the event responds to the element that needs to be bound, the event bubble mechanism triggers the binding event of its outer element, and then executes the function on the outer element. Delegate the event to the parent
Events delegate events: click, mouseDown, mouseup, keyDown, keyUp, keyPress. For example, if you have a div wrapped around the five click events, you can set the click events on the div. If you want to confirm which one you click on, you can use e.target to get it
Methods for binding events: (1) Bind onclick, onMouseOver, onMouseOut onmouseDown, onmouseup, ondblClick, onKeyDown, onKeyPress, onKeyUp (2) obtaining domdocument. GetElementById (3) using event listeners binding For example: the addEventListener () or attachEvent () function to bind event listeners
Limitations of event delegation:
For example, events such as Focus and blur have no event bubble mechanism, so they cannot be delegated.
Although events such as Mousemove and Mouseout have bubbled, they can only be calculated and positioned by location, which is high in performance and therefore not suitable for event delegation.
Advantages: 1. It saves a lot of memory and reduces event registration. For example, an UL proxy for all the LI’s click events is a good idea.
2. When a new child object is added, there is no need for event binding, especially for the dynamic content part
Disadvantages: 1. The common use of event proxy should be limited to the above requirements. If you use event proxy for all events, event misjudgment may occur. That is, events are bound to events that should not be raised.