I've just finished the JavaScript stage. I feel very good. But in the summary, I found some mistakes in making web pages, as well as some important aspects. In order to avoid others meeting these problems at this stage. Today, I'll focus on the problems I'm prone to at this stage of JavaScript, so that you can quickly solve the same problems when you encounter them.
I Box covering problem
As long as we do web pages, there will always be a problem of box coverage. We didn't pay attention to the hierarchical relationship of each box when downloading HTML style, resulting in some upper boxes being placed below. When we get the box through document in js, we do some operations, such as click event.
var boy = document.querySelector('.boy');
boy.addEventListener('click', function() {
boy.style.background="red"
})
After we get the box, we register the click event for it. After clicking, the background color of the box turns red. However, if the box of this boy is covered by other boxes, we can get the box and register the click event in time, and we can't do what we want to do with it. The solution is to raise the level of this box so that our mouse can click on the box we registered to monitor. This part is easy to be forgotten. If we use js to get an element but can't do the desired operation, we can check the hierarchical relationship of our own box.
II Correct use of var and let
When we go to the JavaScript stage, we must understand the difference and relationship between var and let thoroughly, otherwise it is easy to make an error when using it.
Similarities:
Local variables: variables declared in the function body using the var and let keywords are somewhat similar. Their scope is local:
Global variables: variables declared using var and let keywords inside a function or outside a code block are somewhat similar. Their scope is global:
difference:
1. In HTML, the global scope is for window objects. The global scope variable declared with var keyword belongs to window object: the global scope variable declared with let keyword does not belong to window object:
2. In the same scope or block level scope, let keyword cannot be used to reset the variables declared by var keyword. var can reset the variables of var key.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>use var Declare variable</h2>
<p id="demo"></p>
<script>
var x = 10;
// The output here is x
{
var x = 2;
// Here, the output x is 2
}
// Here, the output x is 2
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>use let Declare variable</h2>
<p id="demo"></p>
<script>
var x = 10;
// Here, the output x is 10
{
let x = 2;
// Here, the output x is 2
}
// Here, the output x is 10
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
- In the same scope or block level scope, the let keyword cannot be used to reset the variables declared by the let keyword:
In the same scope or block level scope, the var keyword cannot be used to reset the variables declared by the let keyword:
let keyword can be redeclared and assigned in different scopes or different block level scopes:
<h2>JavaScript let</h2>
<p id="demo"></p>
<script>
var i = 5;
for (let i = 0; i < 10; i++) { // Using the let keyword, the scope of variables declared by it is only in the circulatory system, and variables outside the circulatory system are not affected.
// Some code
}
//The output here is 10;
document.getElementById("demo").innerHTML = i;
</script>
<h2>JavaScript let</h2>
<p id="demo"></p>
<script>
var i = 5;
for (let i = 0; i < 10; i++) { // Using the let keyword, the scope of variables declared by it is only in the circulatory system, and variables outside the circulatory system are not affected.
// Some code
}
//The output here is 10;
document.getElementById("demo").innerHTML = i;
</script>
III DOM event flow has three stages
1. Only one stage of capture or bubbling can be executed in JS code;
2. Events like onclick and attachEvent (ie) can only get bubbling stage.
DOM event flow
1. Event flow describes the order in which time is received from the page;
2. When an event occurs, it will propagate between element nodes in a specific order. This propagation process is DOM event flow.
For example, we register a click event for a div:
1. Capture phase
2. Current target stage
3. Bubbling stage
Bubbling event: the process first proposed by IE, in which the event is received by the most specific element at the beginning, and then propagated up to the top node of DOM level by level.
Event capture: Netscape was first proposed. It starts from the top-level node of DOM, and then propagates level by level down to the acceptance process of the most specific elements.
We can understand it this way: when we throw a stone into the water, first of all, it will have a descent process, which can be understood as the capture process from the top layer to the most specific element (target point) of the event; Then bubbles will be generated, which will float to the water after the lowest point (the most specific element). This process is equivalent to event bubble.
We can learn more about capture phase and bubbling phase through code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="father">
father
<div class="son">Son</div>
</div>
<script>
// 3. In the capture stage, if the third parameter of addEventLister is true, it is in the capture stage document - > HTML - > body - > father - > son
var son = document.querySelector('.son');
var father = document.querySelector('.father');
son.addEventListener('click', function() {
alert("son");
}, true);
father.addEventListener('click', function() {
alert("father");
}, true);
// 4. In the bubbling stage, if the third parameter of addEventLister is false, it is in the bubbling stage son - > father - > body - > HTML - > documentson
var son = document.querySelector('.son');
var father = document.querySelector('.father');
son.addEventListener('click', function(e) {
alert("son");
// e.stopPropagation();
}, false);
father.addEventListener('click', function(e) {
alert("father");
}, false);
document.addEventListener('click', function(e) {
alert("document");
}, false);
</script>
</body>
</html>
I will expand and explain according to the above code:
We write a father box, and then write a son box in the father box; Register click listening events for both boxes. When clicking the corresponding box, the warning box of the corresponding box will pop up.
If the third parameter of addEventLister is true, it is in the capture phase, and if the third parameter of addEventLister is false, it is in the bubble phase.
Let's first write the third parameter as true. In the capture phase, let's take a look at the event flow in the capture phase. When we only execute the capture phase, we execute the code and click on the box. We found that father's warning box appeared first, and then son's warning box. This stage is the capture stage.
Then we are changing the third parameter to false and are in the bubbling stage. Let's take a look at the event flow in the bubbling stage. When we only execute the bubbling phase, we execute the code block and click on the son box. The warning box of son box pops up, followed by the warning boxes of father and document. This stage is the bubbling stage.
Solution to bubbling:
The first mock exam often leads to the first mock exam. Then I have a roller monitor for a module in my webpage. Then I have a roller monitor for my entire website. When I do a roller event on a module, I also do roller events. It has a great impact on the production of web pages. At this time, we need to think about solutions. In fact, the solution is very simple. This attribute can prevent bubbling. Usually we use it when we do projects
e.stopPropagation();
To stop the bubbling stage of a certain stage, as I wrote in the bubbling stage above to stop the bubbling of son. But it just prevents son from bubbling. If I click the father box, the warning box of document will still come out after the warning box appears. So we should pay attention when using.
It also has a disadvantage that it does not adapt to ie6-ie8 browsers. If you want to consider compatibility, you can add
e.cancelBubble;
To eliminate bubbling.
be careful:
1. In actual development, we rarely use event capture, and we pay more attention to event bubbling.
2. Some events do not bubble. For example: onblur, onfocus, onmousenter, onmouselive
3. Event bubbling sometimes brings trouble, and sometimes it is very helpful to do something skillfully.
These are the three important points I think after I finish the JavaScript phase. You can refer to it. If there is any mistake, I hope you will find something new. Let's make progress together. You can leave a message if you don't understand. I'll respond after reading it.