js中BOM与DOM的相关知识基础

Posted 2020-09-11

 [函数的声明及调用]

1、>>>函数声明的格式：
function 函数名(参数1,参数2,……){
// 函数体
return 结果;
}

>>>函数调用的格式：
直接调用：函数名(参数1的值,参数2的值,……);
事件调用：事件名=函数名();

2、函数声明的几点强调：
① 函数名的声明，必须符合小驼峰法则（首字母小写，之后每个单词首字母大写）；
② 参数列表，可以有参数，可以无参数。分别称为有参函数，无参函数；
③ 声明函数时的参数列表，称为“形参列表”(变量的名);
调用函数时的参数列表，称为“实参列表”(变量的值);
函数中，实际有效的参数取决于实参的赋值，未被赋值的形参，将为Undefined;
④ 函数如果需要返回值，可用return返回结果。
调用函数时，使用var 变量名=函数名();的方式，接受返回结果；
如果函数没有返回值，则接受的结果为Undefined。

⑤ 函数中变量的作用域：
在函数中，使用var声明的变量，默认为函数局部变量，只在函数内容能用；
不用var声明的变量，默认为全局变量(函数中的全局变量，必须在函数调用后，才能使用)。
函数的形参列表，为函数局部变量，只在函数内部能用；

⑥ 函数声明与函数调用，没有先后之分。即，调用语句可写在声明语句之前。

function func1(){
console.log("调用无参函数");
}

function func2(num1,num2,num3){
func2Num = num1;
console.log("调用有参函数");
console.log("参数1为："+num1);
console.log("参数2为："+num2);
console.log("参数3为："+num3);

return true;
}

var num = func2(1,2,3,4);
console.log(func2Num);


[匿名函数的声明及调用]

1、声明一个匿名函数，直接赋给某个事件；
window.onload=function(){}

2、使用函数表达式，声明匿名函数；
声明函数表达式：var func = function(){}
调用函数表达式：func();
>>> 使用匿名函数表达式，则调用语句，必须在声明语句之后，否则报错(对比常规函数声明与调用区别？)

3、使用自执行函数，声明并直接调用匿名函数：
① !function(参数1){}(参数1的值); //使用任意运算符开头，一般使用!
② (function(){}()) //使用()将匿名函数及之后的括号包裹
③ (function(){})() //使用()只包裹匿名函数表达式
三种写法特点：
① 结构清晰，开头加!，结尾加()。不容易乱，推荐使用；
② 可以表明匿名函数与之后的()为一个整体，推荐使用；
③ 无法表明函数与之后()为一个整体，不推荐使用；

*/
window.onload = function (){
console.log("使用window.onload调用匿名事件");
}


var func3 = function(){
console.log("使用函数表达式，调用匿名函数");
}
func3();

(function(){
console.log("使用自执行函数，调用匿名函数");
})();

!function(num){
console.log("使用自执行函数，调用有参匿名函数，参数为：num="+num);
}(1);



 [函数内部的属性]

【Arguments对象】

1、作用：用于保存调用函数时，所赋值的实参列表。
>>> 当我们调用函数，并使用实参赋值时，实际上参数已经保存到arguments数组中。即使没有形参，也可以使用arguments[n]的形式调用参数；

2、arguments数组的个数，取决于实参列表，与形参无关（顺序从0开始）；
但，当第N个位置的形参、实参、arguments都存在时，形参与arguments是同步的。（即在函数中修改其中一个的值，另一个会同步变化）

3、arguments.callee是arguments的重要属性，用于返回arguments所在函数的引用；
arguments.callee() 可以调用自身函数执行；

在函数内部调用函数自身的写法，被称为递归，所以arguments.callee()是递归调用时常用的方式；

【this】
指向函数调用语句所在作用域，即，哪个对象调用函数，this指向这个对象；



function func4(num1){
console.log("Arguments对象");

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(){}
【JS中代码执行顺序】
 JS中代码运行，会先进行检查、装载，即声明变量、函数等操作；
 然后再进入执行阶段，（变量的赋值等属于执行阶段）。

 所以，函数的声明属于检查装载阶段，函数的调用属于执行阶段。so，函数调用语句写在函数声明语句之前，并没有任何关系。

 所以，上述代码，执行流入
 ------检查装载阶段------
 var num;//声明变量
 function funcN() //声明函数

 ------执行阶段------
 console.log(num);
 num=10;
 funN(); //执行函数的{}中代码

[JS中的事件分类]
1、鼠标事件：
click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup

 2、键盘事件：
 keydown: 键盘按下去触发
 keypress: 键盘按下并松开的瞬间触发
 keyup: 键盘抬起时触发

 [注意事项：(了解)]
 ① 执行顺序： keydown——keypress——keyup
 ② 长按时，会循环不断的执行keydown-keypress
 ③ 有keydown事件，不一定有keyup事件(事件触发过程中，鼠标移走，可能就没有keyup)
 ④ keypress只能捕获字母、数字、符号键，不能捕获功能键；keydown/keyup基本可以捕获所有功能键(特殊除外)
 ⑤ keypress区分大小写，keydown和keyup不区分；
 ⑥ keydown/keyup区分主键盘和小键盘，keypres不区分；

 [确定键盘触发按键]
 ① 在触发函数中，传入参数e，代表按键时间；
 ② 通过e.keyCode ，确认按键Ascii码值，进而确定按键；
 ③ 所有浏览器系统的写法(一般不必要)：
 var evn = e||event; //取到键盘事件
 var code = evn.keyCode||evn.which||evn.charCode;//取到按键编码

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("你按了回车");
}
if(code==18){
isAlt = 1;
}
// 判读Alt+Enter组合键
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;
}
}


 【JS中的DOM0事件模型】

 1、内联模型：直接将函数名作为html标签的某个事件属性的属性值；
 eg: <button onclick="func()">按钮</button>
 缺点：违反W3C关于Html与javascript分离的基本原则；

 2、脚本模型：在JS脚本中通过事件属性进行绑定；
 eg: window.onload = function(){}
 局限性：同一节点，只能绑定一个同类型事件；


 【JS中的DOM2事件模型】
1、添加事件绑定：
 IE10之前：btn1.attachEvent("onclick",函数);
 其他浏览器：btn1.addEventListener("click",函数,true/false);
 参数三：false(默认)，表示事件冒泡，true，表示事件捕获
 兼容写法：if(btn1.attachEvent){
 btn1.attachEvent();
 }else{
 btn1.addEventListener();
 }

 优点：同一节点，可以添加多个同类型事件的监听器；

 2、取消事件绑定：
 注：如果要取消事件绑定，那么在绑定事件时，回调函数必须使用有名函数，而不能使用匿名函数。因为在取消事件绑定时，需要传入函数名；
 .removeEventListener("click",函数名);
 .detachEvent("onclick",函数名);


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);
}

[JS中的事件流]

 1、事件冒泡：当某DOM元素触发某事件时，会从当前DOM元素开始，逐个触发其祖先元素的同类型事件，直到DOM根节点；
 DOM0模型，均为事件冒泡；
 IE中使用.attachEvent()添加的事件，均为冒泡；
 其他浏览器，.addEventListener添加的事件，当第三个参数为false时，为冒泡；

 2、事件捕获：当某DOM元素触发某事件时，会从DOM根节点开始，逐个触发其祖先元素的同类型事件，直到触发到当前元素为止；
 只有使用.addEventListener添加事件，并设置第三个参数为true时，才进行捕获；

 ↓ 当前元素 ↑
 ↓ ↑
 冒 父元素 捕
 ↓ ↑
 泡 爷爷元素 获
 ↓ ↑
 DOM根节点

 3、阻断事件冒泡：
 IE浏览器中：将e.cancelBubble属性设为true；
 其他浏览器：调用e.stopPropagation();方法
 兼容写法：function myParagraphEventHandler(e) {
 e = e || window.event;
 if (e.stopPropagation) {
 e.stopPropagation(); //IE以外
} else {
 e.cancelBubble = true; //IE
}
}

3、阻止默认事件：
 IE浏览器中：将e.returnValue属性设为false；
 其他浏览器：调用e.preventDefault();方法
 兼容写法：function eventHandler(e) {
        e = e || window.event;
        // 防止默认行为
        if (e.preventDefault) {
            e.preventDefault(); //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(); //IE以外
} else {
e.cancelBubble = true; //IE
}
}

function eventHandler(e) {
e = e || window.event;
// 防止默认行为
if (e.preventDefault) {
e.preventDefault(); //IE以外
} else {
e.returnValue = false; //IE
}
alert("");
}

div1.addEventListener("click",function(e){
myParagraphEventHandler();
console.log("div1触发了click事件");
},true);

div2.addEventListener("click",function(e){
myParagraphEventHandler();
console.log("div2触发了click事件");
},true);

div3.addEventListener("click",function(e){
myParagraphEventHandler();
console.log("div3触发了click事件");
},true);

/*div1.onclick = function(){
console.log("div1触发了click事件");
}
div2.onclick = function(){
console.log("div2触发了click事件");
}
div3.onclick = function(){
console.log("div3触发了click事件");
}