This article has participated in the call for good writing activities, click to view: back end, big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!
This article will be updated from time to time, and the date of the update will be reflected in the title for easy viewing. Ecma-262 standard town building 🙏🏻, I wish you a happy friend to see this article ~
The difference between threads and processes
// todo
Chrome multi-process architecture @0728
This figure is from the network. For details, please refer to the following figure
What happens between entering the URL and presenting the page @0728
The principle of pwa
// todo
Ajax principle, the implementation of native Ajax
// todo
What is the three handshake, why must three handshake four wave 👋
// todo
How to optimize the first screen time and white screen time
// todo
Describe the principles of HTTPS, the differences between HTTPS and HTTP, and the differences between HTTP1.1 and HTTP2.0
// todo
HTTP headers
// todo
Why are common CDN domain names different from business domain names?
// todo
HTTP header how to check whether the protocol is websocket
// todo
How do I stay connected to the server
// todo
What are the functions and differences of multiple request methods
// todo
Common status code
// todo
Browser HTTP cache hit flow @0727
Strong cache vs. negotiated cache
304 status code, by what to determine whether to use cache
The illustration is shown in the figure above, and can be referred to for details
📌 For details, see HTTP Caching >
Encapsulation ajax
// todo
Browser local storage
// todo
How can I resolve the cross-domain HTTP request problem
// todo
What is the Fetch API? Can you replace AJAX?
// todo
- XMLHTTPRequest
- Fetch
// How to package fetch (AbortController)
A router is a route.
// todo
Route parameters are transmitted and parameters are obtained
// todo
Delay routing
// todo
What are the properties of cookies
// todo
What does the options request method do
// todo
How to prevent JS from accessing cookies
// todo
The node multi-process
How does cluster enable multiple processes in node, and can a port be listened on by multiple processes
How do Node processes communicate
Can Node enable multi-threading
How do processes and threads communicate in an operating system
The event model
The event
All behavior on the browser is event-driven, and when an event occurs, we can bind a listener function to that event, which performs some logic inside that we need to execute when that event occurs. Browsers provide a number of support for listening on element events (which must be listening on an object/element), and the listener functions registered on that object are executed immediately when the event is triggered. 📌 W3School >
Event propagation
The browser event model determines the direction in which events propagate once the current event occurs.
There are three stages of event propagation:
- Capture phase: events from
The outermost ancestor elementIt propagates inward toThe target element(Top parent -> target) - The target stage: Event arrival
The target element(@ Target) - Bubbling phase: events from
The target elementSpread outward toThe outermost ancestor element(Target -> Top parent)
The browser is based on the DOM stream event model, and the event propagation process is the capture phase -> target phase -> bubbling phase.
Event listeners
There are three types of event listener: HTML on-event listener, DOM event attribute binding, and DOM addEventListener.
HTML ON – Event listener
<button onclick="console.log(1)"> click me </button>
The code above is an example of listening for events on an HTML tag. You can write htML-supported events on the tag. However, this way the JS code and HTML are not clear, so we try to minimize the use of this event-listening binding.
Dom event property binding
<! --html-->
<div id="example"> test </div>
Copy the code// js
const div = document.getElementById('example')
div.onclick = (e) = > {
console.log(1)}Copy the codeThe code above sets the event attribute supported by the specified DOM element to bind the listening event. The downside of this approach is that there is no support for binding more than one listener to an event on the same element. By default, if there is an event binding more than one listener, the later one will override the previous one.
dom addEventListener
Our common registration methods are as follows:
target.addEventListener(type, listener, useCapture);
target.addEventListener(type, listener, options);
UseCapture: event listening phase (false: bubble phase, default value, true: capture phase) Options: {once: Execute only once; Passive: Promise that the event listener will not call preventDefault. This will help performance. UseCapture: capture (or bubble)} // This parameter is basically unused, so I won’t give an example
<! --html-->
<div id="example"> test </div>
Copy the code// js
const div = document.getElementById('example')
div.addEventListener('onclick'.function(e) {
console.log(1)})Copy the codeAddEventListener is currently our recommended event listener binding method. Compared with the previous two, it supports binding multiple different listener functions on an event, and setting the listening stage of registered events, etc.
📌 For more addEventListener parameters see MDN >
AddEventListener example many articles have been shown, also easier to understand, here I will not do a specific demonstration. Specifically, what are the key concepts when using addEventListener.
The third parameter
The third parameter to addEventListener typically sets whether the listener is set in the capture or bubble phase of the event. (Bubble phase by default)
Removing Event Listening
The corresponding removal event listener can be removeEventListener with the same parameters as addEventListener. (If both the binding and removal methods receive an event handler listener that is anonymous, they are not considered the same listener.)
dom.addEventListener('click', function(e) {})
dom.removeEventListener('click', function(e) {})
The binding method and the removal method must receive the same listener to be effective.
const listener = (e) => {}
dom.addEventListener('click', listener)
dom.removeEventListener('click', listener)
Preventing an event from spreading
e.stopPropagation()
- document
- html
- body
- div
Copy the codeIf we now have an upper DOM structure (from outside in), p.addeventListener (‘click’, handler) we bind a listening event to the div. When the div’s listening event occurs, the DOM stream event model propagates as catch -> target -> bubble
Capture stage: Document -> HTML -> body -> div
Target stage: div
Bubble stage: div -> body -> HTML -> document
This process means that all elements along the path of the event stream will be fired if they are bound to the same event listener and satisfy the listening phase (in this case, the click event).
Back to the title, the e. topPropagation method is known to prevent event bubbling, that is, event propagation does not bubble to subsequent events (listeners executed in the bubbling phase of subsequent bindings will not be executed). However, this method is designed to prevent event propagation, that is, not just event bubbling, but event propagation stops immediately whenever the method is called, either captured or bubbling.
Here’s an example to make it clear:
// html
<html>
<body>
<div id="parent">
parent
<span id="child">
child
<p id="son">son
</p>
</span>
</div>
<div id="scriptPanel"><img src="indexjs.png" /></div>
</body>
<script src="index.js"></script>
</html>
Copy the codeFor a clearer view, we style the nested DOM a little and contrast the
e.target.nodeName
In js we use e.target. NodeName, which is used to print the nodeName (uppercase) of the current event target element. When we click son, the output is as follows:
We’ll see that the output is always P, because the real element of the event that we’re firing is P, and as the event propagates, it passes through the parent and child and they have the same listening event that’s being fired. So how do we get the element in the listener function that is currently bound to the listener event?
e.currentTarget.nodeName
E.currenttarget and e.turrenttarget look very similar. The difference is that e.turrenttarget refers to the actual target element that triggers the current event, and e.currenttarget refers to the element to which the listener is bound.
After an event is triggered, event propagation will go through n elements. Listener functions can be registered on each element. No matter which listener function prints the target element E.target, it will be the same. And e. currenttarget, the elements bound by different listener functions are printed differently.
Click son to output the following:
To get back to the topic, let’s call e.topPropagation in the parent click event,
Click son to output the following:
Call e.topPropagation not only stopped the event froth, but also stopped the event propagation.
This function can be used in some globally disabled scenarios, such as expired scenarios with no permissions, etc. A listener can be made on the global click event to prevent event propagation when the event is disabled.
Blocking default behavior
e.preventDefault()
Dom elements have some built-in default behavior when an event occurs, such as clicking on the A tag automatically jumping. Call e.preventDefault() in the event listener to prevent default behavior from occurring when the default behavior is not needed.
Event delegation
Because when an event occurs, it must undergo a process of event propagation, hence the concept of event delegation.
We can be entrusted to the parent element of events that will target element, namely on the parent element to monitor the same event, this kind of behavior is suitable for the child elements have the same for the same behavior in a wide range of processing, we need to give a child element binding to monitor events, and only need in their public register an event listeners on the parent element, reduce event bindings reduce dom references page of memory. And use e.target to get the target element that actually fires the event.