首页 > 代码库 > js中BOM与DOM的相关知识基础
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 = http://www.mamicode.com/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 = http://www.mamicode.com/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的相关知识基础