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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js中BOM与DOM的相关知识基础相关的知识,希望对你有一定的参考价值。


 [函数的声明及调用]

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事件");
}













































































































































































































































































































































































以上是关于js中BOM与DOM的相关知识基础的主要内容,如果未能解决你的问题,请参考以下文章

前端基础之BOM和DOM

前端基础之BOM和DOM

前端基础之BOM和DOM

前端基础之BOM和DOM

前端基础之BOM和DOM

前端基础之BOM和DOM