mdn--javascript--Introduction--The second chapter--Summary of knowledge points

If Else

Switch

Ternary operators

(condition)? Run this Code:run this code instead

For Loop

Break jumps out of the loop

Continue jump out of the current loop and continue to the next loop

Functions: Reusing code blocks

anonymous functions

1 Binding with events (the primary function of anonymous functions)

2 Specifies that it is a variable value (var a = function () {}) but it is best not to use this method, preferably function A () {}

Scope and conflict

A variable defined within a function only works within a function, that is, the scope is a function

Think about the idea of creating a library of functions. As you move further into your programming career, you will begin to do the same thing again and again. It 's a good idea to start keeping your favorite utility libraries - then you can copy them into new code and even apply them to any HTML page that needs it .

Event

not part of the JS language, just part of the browser's built-in JsAPI

binding properties do not inline binding in HTML

AddEventListener () and RemoveEventListener ()

( defined in the DOM2 level)

El.onclick=functiona

El.onclick=functionb

And

El.addeventlistener (' click ', A);

El.addeventlistener (' click ', A);

Both of these ways:

the first kind of function A will not execute and will be overwrite (equivalent to Adding event attributes to El), not flexible

But the first kind of compatibility is better

And the second, two functions will be executed, very flexible, can be removed

Compatibility is not good ( so it is necessary to write a packaged function in your own function library )

Event Object

E.target the object that caused the event

E.preventdefault () block default events

Form.onsubmit = function (e) {

if (Fname.value = = = "| | lname.value = = =") {

E.preventdefault ();

Para.textcontent = ' need to fill in both names! ';

}

}

Event Bubbling Capture

Event bubbling and capturing are two mechanisms that describe what happens when you activate two handlers of the same event type on an element.

Videobox.onclick = function () {

Videobox.setattribute (' class ', ' hidden ');

};

Video.onclick = function () {

Video.play ();

};

Bubbling and capturing explanations

When an event is triggered by an element that has a parent element (for example , <video> Our example), the modern browser runs two different stages -the capture phase and the bubbling phase. During the capture phase :

• The Browser examines the outermost ancestor of an element () Whether the onclick registers an event handler in the capture phase and, if so, runs it.
• then it moves to the inside of the next element , does the same thing, then the next element, and so on, until it reaches the actual clicked element.

in the bubbling Stage , exactly the opposite:

• The browser checks that the actual clicked element onclick has registered an event handler in the bubbling phase, and if so, runs it.
• then it moves to the next direct ancestor element and does the same thing, then the next one, and so on until it reaches the element.

in modern browsers, By default, all event handlers are registered in the bubbling phase . So in our current example, when you click on the video, click on the event from the <video> element outward bubble to the element. along the journey:

• It found video.onclick ... handler and run it, so the video starts playing first.
• then it finds videobox.onclick ... handler and runs it, so the video is also hidden.

Stoppropagation() Fix the problem

This is annoying behavior, but there is a way to solve it! The standard event object has an available function , stoppropagation (), which, when invoked on the handler's event object, causes the handler to run, but the event does not occur further on the chain, so no more handlers will be run.

Therefore, we can resolve our current problem by changing the second handler function in the previous code block to this one:

Video.onclick = function (e) {

E.stoppropagation ();

Video.play ();

};

Event Delegate

bubbling also allows us to use Event Delegation - This concept relies on the fact that if you want to run some code on a large number of child elements, when you click on any of them , you can set the event listener to their parent element, the event listener then bubbles the effect to each child element without having to set up each child's event listener individually.

A good example is a series of list items - If you want each list item to pop up a message when clicked, you can set the click Event Listener on the parent <ul> item and Bubbles to the list item.

mdn--javascript--Introduction--The second chapter--Summary of knowledge points