The relevant knowledge base of BOM and Dom in JS

[Declaration and invocation of functions]

1. The format of the >>> function declaration:
Function name (parameter 1, parameter 2,......) {
function body
return result;
}

The format of the >>> function call:
Call directly: the function name (the value of parameter 1, the value of parameter 2,......);
Event Invocation: Event name = function name ();

2, the function declaration of several emphasis:
The declaration of the ① function name must conform to the small hump rule (first letter lowercase, then each word capitalized);
② parameter list, can have parameters, can have no parameters. It is called the parameter function, and the function is no parameter.
③ a parameter list when declaring a function, called a "parameter list" (the name of a variable);
A list of arguments when a function is called, called the "argument list" (the value of the variable);
function, the actual valid parameters depend on the assignment of the argument, and the parameter that is not assigned will be undefined;
④ function If a return value is required, return the result using a return.
When calling a function, accept the return result by using the var variable name = function name ();
If the function does not return a value, the accepted result is undefined.

Scope of variables in the ⑤ function:
In a function, a variable declared with VAR, which defaults to a function local variable, is only available for function content;
A variable declared without VAR, which defaults to a global variable (a global variable in a function, must be used after a function call).
The formal parameter list of a function, which is a function local variable, is only available within the function;

⑥ function declaration and function call, there is no successive points. That is, the invocation statement can be written before the declaration statement.

function Func1 () {
Console.log ("Call no parameter function");
}

function Func2 (num1,num2,num3) {
Func2num = NUM1;
Console.log ("Call has an argument function");
Console.log ("Parameter 1 is:" +NUM1);
Console.log ("Parameter 2 is:" +num2);
Console.log ("Parameter 3 is:" +num3);

return true;
}

var num = Func2 (1,2,3,4);
Console.log (Func2num);


[Declaration and invocation of anonymous functions]

1, declare an anonymous function, directly assigned to an event;
Window.onload=function () {}

2, using function expressions, declaring anonymous functions;
declaring function expressions: var func = function () {}
Call function Expression: func ();
>>> using an anonymous function expression, the calling statement must be followed by an error after declaring the statement (comparing the general function declaration to the call?). )

3. Declare and invoke the anonymous function directly using the self-executing function:
①!function (parameter 1) {} (value of parameter 1); Start with any operator and use it normally!
② (function () {} ())//use () enclose the anonymous function and the following parentheses
③ (function () {}) ()//use () to wrap only anonymous function expressions
Three types of writing features:
① structure clear, beginning Plus!, end Plus (). Not easy to mess, recommended use;
② can indicate that the anonymous function and the following () as a whole, recommended to use;
③ cannot indicate that the function and after () are a whole, not recommended for use;

*/
Window.onload = function () {
Console.log ("Invoke Anonymous events using Window.onload");
}


var func3 = function () {
Console.log ("Use function expression, invoke anonymous function");
}
Func3 ();

(function () {
Console.log ("Use self-executing function, invoke anonymous function");
})();

!function (num) {
Console.log ("Use self-executing function, call the parameter anonymous function, parameters are: num=" +num);
} (1);



[Properties inside a function]

"Arguments Object"

1, function: Used to save the calling function, the value of the argument list assigned.
>>> when we call a function and assign a value using an argument, the argument is actually saved to the arguments array. Parameters can be called using arguments[n], even without formal parameters;

2. The number of arguments arrays, depending on the argument list, is independent of the parameter (Order starting from 0);
However, when the parameters, arguments, and arguments of the nth position are present, the shape participates in the arguments is synchronous. (That is, modify one of the values in the function and the other will change synchronously)

3. Arguments.callee is an important attribute of arguments, which is used to return the reference of arguments function;
Arguments.callee () can invoke its own function execution;

Calling the function itself in the function itself is called recursion, so Arguments.callee () is a common way of recursive invocation;

"This"
Point to the scope of the function call statement, that is, which object calls the function, this is the object;



function Func4 (NUM1) {
Console.log ("arguments object");

Console.log (NUM1);
num1++;

if (num1<=10) {
Arguments.callee (NUM1);
}

}
FUNC4 (1);

function Func5 () {
Console.log (this);
}
Func5 ();




var AA = {
Num:1,
Funcaaa:function () {
Console.log (this);
}
}
AA.FUNCAAA ();
Console.log (Aa.num);



Console.log ("\n\n\n\n\n\n\n\n\n\n\n\n\n\n");


Console.log (num);
var num = 10;
FuncN ();
function FuncN () {}
"Code execution order in JS"
JS in the code to run, will be checked, loaded, that is, declaring variables, functions and other operations;
And then into the execution phase, (the assignment of variables is the execution phase).

Therefore, the declaration of a function belongs to the check loading stage, and the function invocation belongs to the execution phase. So, the function call statement is written before the function declaration statement, and there is no relationship.

So, the code above executes the incoming
------Check the Load stage------
var num;//declaring variables
function FuncN ()//declaring functions

------Execution Phase------
Console.log (num);
num=10;
Funn (); Code in {} Executing the function

[Event Classification in JS]
1. Mouse events:
Click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup

2. Keyboard events:
KeyDown: Keyboard presses down to trigger
KeyPress: Instant trigger when keyboard is pressed and released
KeyUp: Triggered when the keyboard is lifted

[Note: (Learn)]
① Execution Order: Keydown--keypress--keyup
② long time, will be circulating continuous execution keydown-keypress
③ There are KeyDown events, there is not necessarily a KeyUp event (during the event trigger, the mouse is moved, there may be no keyup)
④keypress can only capture letters, numbers, symbol keys, cannot capture function keys; Keydown/keyup basically captures all function keys (except special)
⑤keypress are case-sensitive, KeyDown and KeyUp are not differentiated;
⑥keydown/keyup distinguish the main keyboard and keypad, keypres do not distinguish;

[OK Keyboard trigger Button]
① in the trigger function, the input parameter E, representing the key time;
② through the E.keycode, confirm the key ASCII code value, and then determine the key;
③ all browser systems (generally not necessary):
var evn = e| | Event Fetching keyboard Events
var code = evn.keycode| | evn.which| | evn.charcode;//Fetch the key code

var isalt = 0;
var isent = 0;
Document.onkeydown = function (e) {
var evn = e| | Event
var code = evn.keycode| | evn.which| | Evn.charcode;

if (code==13) {
Isent = 1;
Alert ("You pressed the carriage return");
}
if (code==18) {
Isalt = 1;
}
Interpreting Alt+enter Key Combinations
if (isalt==1&&isent==1) {
Console.log ("Alt+enter");
}else if (isalt==1&&isent==0) {
Console.log ("Alt");
}else if (isalt==0&&isent==1) {
Console.log ("Enter");
}
}
document.onkeypress = function (e) {
Console.log (e);
}
Document.onkeyup = function (e) {
Console.log (e);
if (e.keycode==13) {
isent = 0;
}

if (e.keycode==18) {
Isalt = 0;
}
}


"The DOM0 event model in JS"

1, inline model: directly the function name as an attribute value of an event property of an HTML tag;
Eg: <button onclick= "func ()" > button </button>
Cons: Violating the basic principles of HTML and JavaScript separation;

2, the script model: in the JS script through the event attribute to bind;
Eg:window.onload = function () {}
Limitations: The same node can only bind one type of event;


"The DOM2 event model in JS"
1. Add Event Bindings:
IE10 Before: btn1.attachevent ("onclick", function);
Other browsers: Btn1.addeventlistener ("click", Function, True/false);
Parameter three: false (default), indicating event bubbling, true, indicating event capture
Compatible wording: if (btn1.attachevent) {
Btn1.attachevent ();
}else{
Btn1.addeventlistener ();
}

Advantage: The same node, you can add multiple listeners of the same type of event;

2. Cancel Event Binding:
Note: If you are canceling an event binding, the callback function must use the named function instead of the anonymous function when binding the event. Because you need to pass in the name of the function when you cancel the event binding;
. RemoveEventListener ("Click", the name of the function);
. DetachEvent ("onclick", the name of the function);


Window.onload = function () {
var btn1 = document.getElementById ("btn1");

function Func1 () {
Alert ("1");
}

Btn1.addeventlistener ("click", Func1,false);

Btn1.addeventlistener ("click", Function () {
Alert (2);
},false);

var btn2 = document.getElementById ("btn2");
Btn2.addeventlistener ("click", Function () {
Btn1.removeeventlistener ("click", Func1);
},false);
}

[Event flow in JS]

1. Event bubbling: When a DOM element triggers an event, it starts with the current DOM element, triggering the same type of event of its ancestor element one at a time, until the DOM root node;
The DOM0 model is the event bubbling;
The events added in IE using. attachevent () are bubbling;
Other browsers,. AddEventListener added events, when the third parameter is false, is bubbling;

2. Event capture: When a DOM element triggers an event, it starts with the DOM root node, triggering the same type of event of its ancestor element one at a time until the current element is triggered;
Capture only when you add an event using. AddEventListener and set the third argument to true;

↓ Current Elements ↑
↓↑
Take the father element to catch
↓↑
Bubble Grandpa Element won
↓↑
DOM root node

3. Block Event bubbling:
In IE: Set the E.cancelbubble property to true;
Other browsers: Call E.stoppropagation ();
Compatible wording: function Myparagrapheventhandler (e) {
E = e | | window.event;
if (e.stoppropagation) {
E.stoppropagation (); Outside IE
} else {
E.cancelbubble = true; Ie
}
}

3. Block Default events:
In IE: Set the E.returnvalue property to false;
Other browsers: Call E.preventdefault ();
Compatible wording: function EventHandler (e) {
E = e | | window.event;
Prevent default behavior
if (E.preventdefault) {
E.preventdefault (); Outside IE
} else {
E.returnvalue = false; Ie
}
}

var div1 = document.getElementById ("Div1");
var div2 = document.getElementById ("Div2");
var div3 = document.getElementById ("Div3");

function Myparagrapheventhandler (e) {
E = e | | window.event;
if (e.stoppropagation) {
E.stoppropagation (); Outside IE
} else {
E.cancelbubble = true; Ie
}
}

function EventHandler (e) {
E = e | | window.event;
Prevent default behavior
if (E.preventdefault) {
E.preventdefault (); Outside IE
} else {
E.returnvalue = false; Ie
}
Alert ("");
}

Div1.addeventlistener ("click", Function (e) {
Myparagrapheventhandler ();
Console.log ("Div1 triggered the Click event");
},true);

Div2.addeventlistener ("click", Function (e) {
Myparagrapheventhandler ();
Console.log ("Div2 triggered the Click event");
},true);

Div3.addeventlistener ("click", Function (e) {
Myparagrapheventhandler ();
Console.log ("Div3 triggered the Click event");
},true);

/*div1.onclick = function () {
Console.log ("Div1 triggered the Click event");
}
Div2.onclick = function () {
Console.log ("Div2 triggered the Click event");
}
Div3.onclick = function () {
Console.log ("Div3 triggered the Click event");
}

The relevant knowledge base of BOM and Dom in JS