JS中的事件&对象
一、JS中的事件
（一）JS中的事件分类
1、鼠标事件
click/dblclick/onmouseover/onmouseout
2、HTML事件
onload/onscroll/onsubmit/onchange/onfocus
3、键盘事件
keydown： 键盘按下时触发
keypress：键盘按下并松开的瞬间触发
keyup： 键盘抬起时触发
[注意事项]
① 执行顺序：keydown->keypress->keyup
② 当长按时，会循环执行keydown->keypress
③ 有keydown并不一定有keyup，当事件触发过程中，鼠标将光标移走， 将导致没有keyup
④ keypress只能捕获键盘上的数字、字母、符号键，不能捕获各种符号键，而keydown和keyup可以。
⑤ keypress支持区分大小写，keydown和keyup并不支持。
[确定触发的按键]
① 在触发的函数中，传入一个参数e，表示键盘事件；
② 使用e.keyCode，取到按键的Ascll码值，进而确定触发按键；
③ 所有浏览器的兼容写法（一般并不需要）：
var evn = e || event;
var code = evn.keyCode || evn.which || evn.charCode;
（二）JS中的DOM0事件模型
1、内联模型(行内绑定)：
直接将函数名作为HTML标签的某个事件属性的属性值；
eg：<button onclick="func()">DOM0内联模型</button>
优点：使用方便。
缺点：违反了w3c关于HTML与JavaScript分离的基本原则；
2、脚本模型(动态绑定)：
在JS脚本中，取到某个节点，并添加事件属性；
优点：实现了HTML与JavaScript的分离；
缺点：同一个节点只能绑定一个同类型事件。如果绑定多个，最后一个生效。
（三）JS中的DOM2事件模型
1、添加事件绑定方式：
① IE8之前：btn2.attachEvent("onclick",函数);
② 其他浏览器：btn2.addEventListener("click",函数,true/false);
参数三：false(默认)：表示事件冒泡 true：表示事件捕获
③ 兼容写法：if (btn2.attachEvent) {
btn2.attachEvent();
}else{
btn2.addEventListener();
}
优点：① 可以给同一节点，添加多个同类型事件；
② 提供了可以取消事件绑定的函数。
2、取消DOM2事件绑定：
注意：如果要取消DOM2的事件绑定，那么在绑定事件时，处理函数必须要使用有名函数，而不能使用匿名函数。
btn2.removeEventListener("click",func2);
btn2.detachEvent("onclick",func2);
（四）JS中的事件流
1、事件冒泡：
当某DOM元素触发一种事件时，会从当前节点开始，逐级往上触发其祖先节点的同类型事件，知道DOM根节点。
>>> 什么情况下会产生事件冒泡：
① DOM0模型绑定的事件，全部都是冒泡；
② IE8之前，使用attachEvent()绑定的事件，全部都是冒泡；
③ 其他浏览器，使用addEventListener()添加事件，当第三个参数省略或为alse时，为事件冒泡；
2、事件捕获：
当某DOM元素触发一种事件时，会从文档根节点开始，逐级向下触发其祖先节点的同类型事件，直到该节点自身。
>>> 什么情况下会产生事件捕获：
① 使用addEventListener()添加事件，当第三个参数为true时，为事件捕获；
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
}
}
4、取消事件默认行为
在IE浏览器中，使用e.returnValue = false;
在其他浏览器中，使用e.preventDefault();
兼容所有浏览器的写法：
function eventHandler(e) {
e = e || window.event;
// 防止默认行为
if (e.preventDefault) {
e.preventDefault(); //IE以外
} else {
e.returnValue = false; //IE
}
}
二、JS中的内置对象
（一）JS中的数组
1、数组的基本概念？
数组是在内存空间中连续存储的一组有序数据的集合。
元素在数组中的顺序，成为下标。可以使用下标访问数组的每个元素
2、如何声明一个数组？
① 使用字面量声明：var arr = [];
在JS中，同一数组，可以存储各种数据类型。
例如：var arr=[1,"绾",true,null,func];
② 使用new关键字声明：var arr = new Array(参数);
>>> 参数可以是：
a. 参数省略，表示创建一个空数组；
b. 参数为一个整数，表示声明一个length为指定长度的数组，
但是这个length可以随时可变可追加。
c. 参数为逗号分隔的多个数值，表示数组的多个值。
new Array(1,2,3)==[1,2,3]
3、数组中元素的读写/增删
① 读写：通过下标访问元素。下标从0开始 arr[1]="hahaha";
② 增删：
a. 使用delete关键字，删除数组的某一个值。删除之后，数组的长度不变，对应位置变为Undefined。 eg：delete arr[1];
b. arr.pop()：删除数组的最后一个值。相当于arr.length -= 1;
c. arr.shift()：删除数组的第一个值。
d. arr.unshift(值)：在数组的第0个位置新增一个值；
e. arr.push(值)：在数组的最后一个位置新增一个值；
f. 直接访问数组没达到的下标，可以动态追加。arr[100]=1; 中间如果有空余下标，将存入Undefined。
4、数组中的其他方法：
① join("分隔符号")：将数组用指定分隔符链接为字符串。当参数为空时， 默认用英文逗号分隔
② concat()：【原数组不会被改变】将数组，与两个或多个数组的值链接为新数组。concat连接时，如果有二维数组，则至多能拆一层[]
[1,2].concat([3,4],[5,6])->[1,2,3,4,5,6]
[1,2].concat([3,4,[5,6]])->[1,2,3,4,[5,6]]
③ push() 数组最后增加一个，unshift(值) 数组开头增加一个。-返回数组的长度；
pop() 数组最后删除一个，shift() 数组开头删除一个。-返回被删除的值
【上述方法，均会改变原数组】
④ reverse()：【原数组会改变】将数组翻转，倒序输出；
⑤ slice(begin,end)：【原数组不会被改变】截取数组中的某一部分，并返回被截取的新数组将
>>> 传入一个参数，表示开始区间，默认截到数组最后；
>>> 传入两个参数，表示开始和结束的下标，左闭右开区间（包含begin，不包含end
>>> 两个参数可以为负数，表示从右边开始数，最后一个值为-1；
⑥ sort()：【原数组被改变】将数组进行升序排列；
>>> 默认情况下，会按照每个元素首字母的ASCII值进行排序；
[3,1,5,12].sort()->[1,12,3,5];
>>> 可以传入一个比较函数，手动指定排序的函数算法；
函数将默认接收两个值a,b 如果返回值>0，则证明a>b；
arr.sort(function(a,b){
return a-b;//升序排列
return b-a;//降序排列
});
⑦ indexOf(value,index)：返回数组中第一个value值所在的下标，如果没有找到返回-1
lastIndexOf(value,index)：返回数组中最后一个value值所在的下标，如果没有找到 返回-1；
>>> 如果没有指定index，则表示全数组查找value；
>>> 如果指定了index，则表示从index开始，向后查找value；
⑧ forEach()：专门用于循环遍历数组。接收一个回调函数，回调函数接受两个参数，第一个参数为数组每一项的值，第二个参数为下标。
【IE8之前，不支持此函数】
arr.forEach(function(item,index){
console.log(item);
console.log(index);
});
⑨ map()：数组映射。使用方式与forEach()相同。不同的是，map可以有return返回值，表示将原数组的每个值进行操作后，返回给一个新数组。
【IE8之前，不支持此函数】
var arr1=arr.map(function(item){
console.log(item);
return item+2;
});
5、二维数组与稀疏数组(了解)
① 二维数组：数组中的值，依然是一个数组形式。
eg：arr = [[1,2,3],[4,5,6]];//相当于两行三列
读取二维数组：arr[行号][列号];
② 稀疏数组：数组中的索引是不连续的。(length要比数组中实际的元素个数大)
6、基本数据类型&引用数据类型：
① 基本数据类型：赋值时，是将原变量中的值，赋值给另一个变量。赋值完成后，两个变量相互独立，修改其中一个的值，另一个不会变化。
② 引用数据类型：赋值时，是将原变量在内存中的地址，赋值给另一个变量。赋值完成后，两个变量中存储的是同一个内存地址，访问的是同一份数据，修改其中一个的值，另一个也会变化。
③ 数值型、字符串、布尔型等变量属于基本数据类型；
数组，对象属于引用数据类型
（二）内置对象
1、Boolean类
也有两种声明方式：
可以使用字面量方式声明一个单纯的变量。用typeof检测为Boolean类型；
也可以使用new Boolean() 声明一个Boolean类型的对象。用typeof检测为Object类型
2、Number类
Number.MAX_VALUE 返回Number类可表示的最大值；
Number.MIN_VALUE 返回Number类可表示的最小值；
toString()：将数值类型转换为字符串类型
toLocaleString()：将数值按照本地格式顺序转换为字符串，一般从右开始，
三个一组加逗号分隔；
toFixed(n)：将数字保留n位小数，并转为字符串格式；
toPrecision(n)：将数字格式化为指定长度。n表示不含小数点的位数长度。
如果n<原数字长度，则用科学计数法表示；
如果n>原数字长度，则小数点后补0；
valueOf()：返回Number对象的基本数字值；
3、String 类
3.1、属性：str.length 返回字符串的长度，字符数
字符串支持类似数组的下标访问方式：str[0];
3.2、方法：
toLowerCase()：将字符串所有字符转成小写；
toUpperCase()：将字符串所有字符转成大写；
charAt(n)：截取数组的第n个字符，相当于str[n]；
indexOf("str","index")：查找字串在字符串中出现的位置，如果没有找到返回-1；
其他同数组的indexOf方法；
lastIndexOf()：同数组
substring(begin,end)：从字符串中截取子串
>>> 传入一个参数，表示从begin开始，到最后；
>>> 传入两个参数，表示从begin到end的区间，左闭右开；
split("分隔符")：将字符串以指定分隔符分隔，存入数组中。传入空""表示将字符串 的每个字符分开放入数组；
replace("old","new")：将字符串中的第一个old替换为new；
>>> 第一个参数，可以是普通字符串，也可以是正则表达式；
>>> 如果是普通字符串，则只替换第一个old。
如果是正则表达式，则可以根据正则的写法要求，进行替换。
4、Date 日期类
4.1、new Date()：返回当前最新时间；
new Date("2017,12,12,12:12:12")：返回指定的时间；
4.2、常用方法
getFullYear()：获取4位年份；
getMonth()：获取月份0-11；
getDate()：获取一个月中的第几天 1-31；
getDay()：获取一周中的第几天 0-6,0表示周天
getHours()：获取小时
getMinutes()：获取分钟
getSeconds()：获取秒
function getTime(){
var dates=new Date();
var year=dates.getFullYear();
var month=dates.getMonth();
var date1=dates.getDate();
var day=dates.getDay();
var weeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六",]
var hours=dates.getHours()<10?"0"+dates.getHours():dates.getHours();
var minutes=dates.getMinutes()<10?"0"+dates.getMinutes():dates.getMinutes();
var seconds=dates.getSeconds()<10?"0"+dates.getSeconds():dates.getSeconds();
var div1=document.getElementById("div1");
div1.innerText=year+"年"+(month+1)+"月"+date1+"日"+weeks[day]
+hours+":"+minutes+":"+seconds;
}
setInterval(getTime,1000);
window.onload=function(){
getTime();
}
（三）自定义对象
1、基本概念：
① 对象：对象是拥有一系列无序属性和方法的集合。
② 键值对：对象中的数据，是以键值对的形式存在。对象的每个属性和方法，都对应值得一个键名，以键取值。
③ 属性：描述对象特征的一系列变量，称为属性。【对象中的变量】
④ 方法：描述对象行为的一系列函数，称为方法。【对象中的函数】
2、对象的声明：
① 字面量声明： var obj = {
key1:value1,
key2:value2,
func1:function(){}
}
>>> 对象中的数据是以键值对形式存储，键与值之间用:分隔。多个键之间用,分隔。
>>> 对象中的键，可以是除了数组/对象以外的任何数据类型。但是，一般我们只用普通变量名作为键。
>>> 对象中的值，可以是任何数据类型。包括数组和对象。
② 使用new关键字声明：var obj= new Object();
obj.key1=value1;
obj.key2=value2;
obj.function=function(){}
3、对象中属性和方法的读写：
① .运算符：
对象内部：this.属性 this.方法()
对象外部：对象名.属性 对象.方法();
② 通过["key"]调用：对象名.["属性名"] 对象名.["方法名"]();
>>> 如果键中包含特殊字符，则只能使用第②种方式；
>>> 对象中，直接写变量名，默认为调用全局变量。如果需要调用对象自身的属性或者方法。需要使用对象名.属性，或者this.属性。
person.age this.age 都可以，但推荐使用this关键字。
③ 删除对象的属性和方法：delete 对象.属性名/方法名
delete person.age;
