1. Event flow
Event flow is a description of the event execution process, which is the flow process of the entire event.
When any event is triggered, it will always go through two stages: [Capture stage] and [Bubbling stage].
In short, the capture phase is the transmission process [from father to son], and the bubbling phase is the transmission process [from son to father]
1. Capture and bubbling
a. If the event is executed in the capture phase, we call it capture mode. It will execute the parent box event first and then execute the child box event. (from top to bottom)
b. If the event is executed in the bubbling stage, we call it bubbling mode. It will execute the child box event first and then the parent box event. The default is bubbling mode. (from bottom to top)
DOM object.addEventListener(‘Click event’, function, true)
in conclusion:
addEventListenerThe third parameter determines whether the event is triggered in the capture phase or in the bubbling phase.- The third parameter of
addEventListeneristrue, which means the capture phase is triggered, andfalse, which means the bubbling phase is triggered. The default value isfalse - Event flow will only have an effect if the parent and child elements have the same event type
- Most scenarios use the default bubbling mode (one of the reasons is that early IE did not support capture
2. Prevent bubbling
a. Overview
Preventing bubbling means blocking the flow of events to ensure that events are only executed on the current element and no longer affect its corresponding ancestor elements.
b.Attention
Mouse over event:
mouseover and mouseout will have a bubbling effect
mouseenter and mouseleave have no bubbling effect (recommended)
Now let’s analyze the uncommon mouseover and mouseout. I first enter from the big div to the small div, and then come out to the initial position. The console output is as follows
When the mouse enters the small div, it will generate leave and pass at the same time. Because it is a click event bound to the large div, all leaving the large div will generate leave, but then when entering the small div, your mouse is also moving, although it is on the small div. The corresponding mouse event is not bound, but if the mouse moves on it, it will still bubble up to the same type of event on the large div, that is, it will generate the output of the mouse passing by. The same is true below.
Summarize
1. If the parent is bound to an event handling function that is different from the event triggered by the child, and the child bubbles up to the parent, the parent will indeed not execute the function
2. But the event was indeed delivered, but it was not shown because the parent did not bind the corresponding function of the event with the same name
3. It’s not that it won’t bubble if you don’t bind the event handler, it will still bubble. Refer to the example above
2. Event delegation
Event delegation is a knowledge and skill that uses the characteristics of event streams to solve some practical development needs. Its main function is to improve program efficiency. A large number of event listeners are relatively performance-intensive. It uses bubbling to first delegate the event to the parent element and then allow the child elements to obtain it, which greatly reduces the total number of event listeners.
Listening events without event delegation binding
Use event delegation to bind events (the basis is that many identical child elements need to be bound to the same event, but cyclic binding will consume performance, so bind the event to the parent element, wait for the child elements to bubble up to the parent element, and then trigger the corresponding event)
3. Other events
1. Page loading event
A. Events triggered when external resources (such as images, external CSS and JavaScript, etc.) are loaded.
Sometimes you need to wait for all page resources to be processed to do something
Event name: load
All resources on the monitoring page have been loaded:
window.addEventListener('load', function() {
//xxxxx
})
B. When the initial HTML document is fully loaded and parsed, the DOMContentLoaded event is triggered without waiting for style sheets, images, etc. to be fully loaded.
Event name: DOMContentLoaded
document.addEventListener(‘DOMContentLoaded’, function () {
})
2. Element scroll event
Events that are continuously triggered when the scroll bar is scrolling
If the length or width of the entire body is larger than the display range of the browser window, you can set the corresponding element scroll event
window.addEventListener('scroll', function() {
//xxxxx
})
The scrollTop attribute refers to the distance between the scrolled position and the initial position, and returns a number.
If the text in the div in the above example overflows, you can directly add the scroll bar effect. Use CSS to add the overflow: scroll; attribute. If you want to add scroll events, just imitate the above steps.
3. Page size event
a. Events will be triggered when the window size changes
window.addEventListener('resize', function() {
//xxxxx
})
b. Detect screen width
c. Get the width and height of the visible part of the element (excluding borders, margins, scroll bars, etc.)
clientWidth and clientHeight
The size of clientTop and clientLeft is the size of border. If border is 0, they are also 0.
4. Element size and position
It is suitable for, for example, what event should be triggered after the web page slides to reach a certain element. At this time, you can use offsetTop to accurately know the distance, and then write the corresponding element scroll event based on this.
Comparison and summary
