一 javaScript的简介
1.1 简介
javascript，是由网景公司在1995年发布的一门语言，命名参考了java语言，简称js。
它是一个函数优先的轻量级的、解释型的编程语言；现在所有的浏览器都内置了javascript解释器，也就是都可以运行javascript语言。同时，javaScript是基于对象、弱类型的编程语言 。
该语言，可用于web，服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
在web上：
-
HTML语言，用于组织数据的结构，显示数据
-
CSS样式表，用来修饰HTML展示数据的样式
-
而JS脚本，用于与HTML页面进行交互行为，比如
客户端数据计算 客户端的表单验证 浏览器事件的触发 动态的效果制作 服务器的异步数据提交
知识扩展：
1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。
于是，ECMA在次年，发布了该语言的标准，并将这种语言称为ECMAScript。这个版本就是1.0版。
2011年，ECMAScript 5.1版发布。
2015年6月发布了当时最新的标准，简称ES6。并且决定以后每年的6月份都正式发布下一个标准。因此ES6也泛指js的最新的标准。
1.2 编写方式
在编写js时，可以有三种写法，分别是事件定义式，嵌入式，文件引入式。
1.2.1 事件定义式
在事件定义期间，也就是在HTML标签的属性里直接写js代码。如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="button" value="登录" οnclick="javascript:alert('hello javascript')">
</body>
</html>1.2.2 嵌入式
就是将js代码以<script>标签的形式嵌入到HTML代码中，如下所示。 该标签可以位于HTML文档中的任意位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function func1(){
alert("hello,javascript");
}
</script>
</head>
<body>
<input type="button" value="登录" οnclick="func1()">
</body>
</html>1.2.3 文件引用式
将js代码单独写到扩展名为.js的文件里，然后将该文件引入到HTML代码中，比如：
脚本文件：first.js
function method1(){
alert("hello,文件引用式")
}
function method2(){
alert("使用的是第二个方法")
}HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入文件，src写引入文件的相对路径 -->
<script type="text/javascript" src="first.js"></script>
</head>
<body>
<input type="button" value="登录" οnclick="method2()">
</body>
</html>二 js语法
2.1 基本知识点
2.1.1 javascript注释
单行注释以 // 开头。
// 输出标题：
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
// 输出段落：
document.getElementById("myP").innerHTML="这是我的第一个段落。";多行注释以 /* 开始，以 */ 结尾。
/* 下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";👁 一句话写完，使用分号或者是换行结束，建议使用分号，可读性更好一些。 一行上有多个语句时，一定要用分号结束每个语句
2.1.2 标识符的命名规则
- 标识符指的就是变量，函数等的名称
- 由字母，数字，下划线，$组成，不能以数字开头，不推荐以下划线和$开头
- 大小写敏感 (y 和 Y 是不同的变量)
- 不能使用javascript里的关键字
- 应尽量做到见名知意(望文知意)
- 遵守小驼峰命名法 2.1.3 变量的应用
-
js是弱类型的语言，变量不需要定义类型，但是变量的值是有类型的
-
变量统一使用var关键字来定义。ES6标准新增了两个关键字
let，const来定义变量 -
变量如果没有初始化，则为
undefined -
变量有作用域，有全局变量，局部变量
2.1.4 JavaScript 数据类型
值类型(基本类型)：
字符串（String）、数字(Number)、布尔(Boolean)、空（null）、未定义（undefined）、Symbol。
引用数据类型（对象类型）：
对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）
注： Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。
2.2 javaScript的基本类型
2.2.1 undifined和null
undefined 这个值表示变量不含有值，即没有初始化。
可以通过将变量的值设置为 null 来清空变量里存的值
2.2.2 String类型
-
字符串，使用单引号或者双引号，将字符串文本引起来。
-
也可以使用new关键字来获取字符串对象
-
字符串都是unicode编码
var carname="Volvo XC60";
var carname='Volvo XC60';
var carname = new String("奥迪 A6L");
var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';
//查看类型
console.log(typeof carname); // string一些特殊字符
var name = "it's \"you\" ";
var lines = "你好 \n 我是你的好朋友"length属性：返回字符串的长度
var carname="Volvo XC60";
//获取字符串的长度
var le = carname.length;
console.log('长度为:'+le); // 8常用方法：
- 大小写转换方法
toLowerCase()
toUpperCase()
- 获取指定位置的字符： js中的字符串的字符下标从0开始。
charAt(index)
charCodeAt(index): 返回指定位置的字符的unicode编码
- 获取子串的下标
indexOf(subStr,[index])
lastIndexOf(subStr,[index]):
查看子串最后一次出现的位置。如果指定下标，则表示截止到此位置时，最后一次出现的下标。如果找不到子串，则返回-1
- 截取子串
substring(begin,[end]): 从begin开始，截取到end的前一位。包前不包后，如果没有end，表示截取到最后。
- 替换子串
replace(oldsub,newsub): 使用newsub来替换掉oldsub
- 拆分字符串
split(bystr,[length])
bystr:作为切割的子串
length: 指定切分后的数组长度，如果length大于切分后的长度，length不生效
如果length小于切分后的长度，则length生效， 表示保留length元素2.2.3 数字类型
-
不区分整型和浮点型
-
字面量默认是10进制，16进制需要添加0x， ES6之后，不再支持8进制字面量
-
极大或极小的数字可以通过科学（指数）计数法来书写：
var x1=34; //默认10进制
var x2=0x123 //16进制
var X3=3.14; //小数
var y=123e5; // 12300000
var z=123e-5; // 0.00123
var m = new Number(1234);
console.log(typeof x1); // number
var pi = 3.1415;
var r1 = pi.toFixed(3); //将数字保留n位小数，然后转为字符串类型。 有四舍五入的特点。 n的范围是[0,100]
console.log(r1); //3.142
console.log(typeof r1); //string扩展：Math类型
- Math的常量
Math.PI
Math.E
Math.log2
- Math的方法
Math.random(): 随机产生一个[0,1)范围内的任意小数。
Math.round(num): 四舍五入方法，进行取整。
Math.sqrt(num): 开平方，开根号
Math.power(a,b): 返回a的b次方
Math.max(a,b,c.......):返回最大值
Math.min(a,b,c,.....):返回最小值
Math.abs(num):返回绝对值
三角函数：
Math.sin(),Math.cos(),Math.tan()2.2.4 boolean类型
-
布尔（逻辑）只能有两个值：true 或 false。
-
常用于分支或者循环结构中。
-
也可以进行数学运算，true相当于1，false相当于0
var x = true;
var y = false;
var r1 = true + 1;
var r2 = false - 1;
console.log(r1); //2
console.log(r2); // -12.2.5 Symbol类型
扩展ES6时，再讲
2.3 javaScript的对象类型
javaScript的引用类型，也就是对象类型。在这个小章节里，咱们先讲Function，Array,Date，RegExp类型；Object咱们单独分一个小章节去讲。
2.3.1 Function类型
当想要重复使用某一段代码片段时，就可以定义成函数类型。
-
函数的定义语法
function 函数名([参数]){ 函数逻辑语句 [return] } -
函数的调用方式：函数名(有参传参)
-
函数体的return关键字，可以根据具体需求而定。
- 没有return关键字，或者只有return关键字时，返回undefined - return后也可以写返回的具体值或变量 -
参数
- js的函数没有重载情况 - 无论传入多少个参数，只要函数名相同，就是同一个函数。 - 所有的参数值都会传入到arguments数组对象里 arguments对象是js中的一个特殊对象，用来存储函数的参数值。本身是一个数组，可以通过数组的方式来访问参数。 arguments.length arguments[i] - 形参没有接受到实参的话，值为undefined -
匿名函数
var funcName = new Function(arg1,.....argN,functionBody); var a = function([参数]){ 逻辑语句 } -
内置函数
typeof: 返回 一个值的 类型 isNaN(): 判断一个值是否为NaN(not a number) parseInt/parseFloat: 将字符串转成数字类型 eval: 用于计算字符串的值。通常情况下的字符串是一个表达式的样子。 也可以用来执行javascript代码
2.3.2 Array对象
-
创建对象的方式
var a1 = new Array(); var a2 = new Array("zs","ls",'ww'); var a3 = ["zs","lisi"] -
数组的长度不是固定的，是根据元素的个数可变的。 语法：变量名.length
-
数组的元素下标从0开始，访问方式：变量名[下标]
-
数组的常用方法：
reverse(): 将数组元素进行反转，也就是前后颠倒 sort([function]):排序方法，默认使用字典排序的升序规则（先比较第一个字符，如果相同，再比较第二个字符） forEach(function):方法用于调用数组的每个元素，并将元素传递给回调函数。 indexOf(指定元素): 返回指定元素的第一次出现的索引，没有的话，返回-1 lastIndexOf(指定元素): 返回指定元素的最后一次出现的索引，没有的话，返回-1 concat(otherArray): 两个数组合并 join([separator]): 将元素拼接成一个字符串，可以使用指定分隔符进行拼接 pop():删除数组的最后一个元素并返回删除的元素。 push():向数组的末尾添加一个或更多元素，并返回新的长度。 shift():删除并返回数组的第一个元素。 unshift():向数组的开头添加一个或更多元素，并返回新的长度。<button οnclick="numbers.forEach(myFunction)">点我</button> <p id="demo"></p> <script> demoP = document.getElementById("demo"); var numbers = [4, 9, 16, 25]; function myFunction(item, index) { demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>"; } </script>
2.3.3 Date对象
function func4(){
var div = document.getElementById("div1");
// 获取当前系统时间
var d1 = new Date();
//获取时间分量
var year = d1.getFullYear();
var month = d1.getMonth(); // 月份返回的数字为0~11 0表示1月
var day = d1.getDate();
var hour = d1.getHours();
var minute = d1.getMinutes();
var second = d1.getSeconds();
var time = d1.getTime(); //获取距离纪元时间点(1970-1-1 00:00:00)的毫秒数
// div.innerText = year+"/"+(month+1)+"/"+day+" "+hour+":"+minute+":"+second+"\n"+time;
//获取出生年月的时间
var birthday = new Date("1986-11-08 7:10:10");
//div.innerText = birthday;
//设置毫秒数
birthday.setTime(1000);
birthday.setFullYear(2021)
var year = birthday.getFullYear();
var month = birthday.getMonth(); // 月份返回的数字为0~11 0表示1月
var day = birthday.getDate();
var hour = birthday.getHours();
var minute = birthday.getMinutes();
var second = birthday.getSeconds();
// div.innerText = year+"/"+(month+1)+"/"+day+" "+hour+":"+minute+":"+second;
// div.innerText = birthday.toString();
//div.innerText = birthday.toLocaleString() //2021/1/1上午8:00:01
div.innerText = birthday.toLocaleDateString(); //2021/1/1
}2.3.4 RegExp对象
1. RegExp表示的是js中的正则表达式
2. 获取对象的方式：
var reg = /pattern/flags
var reg = new RegExp(/pattern/,[flags])
flags标识有以下几种
g: 表示全局匹配，默认就是
i: 忽略大小写
3. 校验方法test：
RegExp对象的test(string)
返回值： true表示匹配成功，false表示匹配失败
exec(str)方法：
在str中寻找符合正则表达式的字符串，并返回。只查找一次。
如果没有找到，返回null。
4. 字符串的参数是正则表达式的方法：
replace(RegExp,newStr): 替换
match(RegExp),返回匹配到的字符串的数组
search(RegExp)：返回匹配到的字符串的首字符索引参考代码
// var str1 = "aaaa ooo bbb";
// var str2 = str1.replace("o","#");
// var str2 = str1.replace(/[o]+/,"#")
// alert(str2);
var str3 = "111abc123bbb111bbbccc222";
var reg1 = /[A-Za-z]+/;
var result1 = str3.match(reg1);
//alert(re1)
var result2 = str3.search(reg1);
alert(result2);练习1：
登录文本框： 要求：6~18个字符，可使用字母，数字，下划线，需要以字母开头
密码文本框： 要求：6~16个字符，必须是字母开头，必须是字母和数字组合。2.4 Object
在这个小章节里，咱们来说一说javascript的Object。 除了javaScript自带的对象类型之外，我们可以使用{}或者Object来自定义对象，同时可以定义该对象的属性和方法。就向java语法一样。
2.4.1 使用{}定义对象
在 JavaScript中，几乎所有的事物都是对象。你已经学习了 JavaScript 变量的赋值，以下代码为变量 car 设置值为 "Fiat" :
var car = "Volvo";对象也是一个变量，但对象可以包含多个值（多个变量），每个值以 name:value 对呈现。
var car = {name:"Fiat", model:500, color:"white"};在以上实例中，3 个值 ("Volvo", 500, "white") 赋予变量 car。
也可以跨越多行来定义一个对象。
var person = {
name: "John",
age: 50,
eyeColor: "blue",
sayHi: function () { return "hello ," + this.name }
};键值对在 JavaScript 对象中通常称为 对象属性。
属性名称，可以是字符串或标识符。
属性的值，可以是任意 JavaScript 数据类型，包括数字、字符串、布尔值、函数、数组、甚至其他对象。
2.4.2 访问对象属性
你可以通过两种方式访问对象属性
第一种方式
person.name第二种方式
person['name'] // 双引号也行2.4.3 访问对象方法
格式如下：
person.sayHi(); //注意，必须带上小括号，不然会认为你访问的是属性，则显示函数本体。2.4.4 使用Object定义对象
// 直接使用Object来创建对象
var student = new Object();
// 自定义属性
student.name = "张三";
student.age = 23;
student.gender = "男";
// 自定义方法
student.say = function(){
//自定义对象的方法时，this指代的就是变量
alert("我叫"+this.name+",今年"+student.age+"岁");
}
//调用方法
student.say();2.4.5 使用构造函数定义对象
function Teacher(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
this.say = function(){
alert("姓名："+this.name)
}
}
//创建一个老师对象
var t1 = new Teacher("老王",32,"男");
t1.say();2.5 运算符
2.5.1 算术运算符
+： +号两边是数字，则进行加法运算，只要有一个是字符串，就做字符串拼接操作
-：
*:
/: js中的除法运算，如右所示： 5/2 等于2.5
%: 5%2 等于1
++ i++ 相当于i=i+1
-- i-- 相当于i=i-12.5.2 关系运算符
>
>=
<
<=
==
!=
全等
===
不全等
!==
用于判断两边数值的关系，返回值是boolean，要么是true，要么是false2.5.3 条件表达式
1. 三目运算表达式
表达式？表达式1：表达式2
当问号之前的表达式成立时，就使用表达式1的结果，否则使用表达式2的结果
2. 关系运算表达式，也叫条件表达式 2.6 流程控制语句
2.6.1 分支结构
在 JavaScript 中，我们可使用以下分支结构的语句：
-
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if (condition){ 当条件为 true 时执行的代码 } -
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if (condition){ 当条件为 true 时执行的代码 }else{ 当条件不为 true 时执行的代码 } -
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
if (condition1){ 当条件 1 为 true 时执行的代码 }else if (condition2){ 当条件 2 为 true 时执行的代码 }else{ 当条件 1 和 条件 2 都不为 true 时执行的代码 } -
switch 语句 - 使用该语句来选择多个代码块之一来执行
switch(n){ case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: 与 case 1 和 case 2 不同时执行的代码 }
2.6.2 循环结构
JavaScript 支持不同类型的循环：
-
for - 循环代码块一定的次数
for (语句 1; 语句 2; 语句 3){ 被执行的代码块 }案例：
for (var i=0; i<5; i++){ console.log("该数字为 " + i); } -
for/in - 循环遍历对象的属性
<body> <p>点击下面的按钮，循环遍历对象 "person" 的属性。</p> <button οnclick="myFunction()">点击这里</button> <p id="demo"></p> <script> function myFunction(){ var x; var txt=""; var person={fname:"Bill",lname:"Gates",age:56}; for (x in person){ txt=txt + person[x]; } document.getElementById("demo").innerHTML=txt; } </script> </body> -
while - 当指定的条件为 true 时循环指定的代码块
while (条件){ 需要执行的代码 } -
do/while - 同样当指定的条件为 true 时循环指定的代码块
do{ 需要执行的代码 }while (条件);
2.6.3 break和continue
break 语句用于跳出循环。
continue 语句中断当前的循环中的迭代，然后继续循环下一个迭代
2.6.4 JS的条件表达式
boolean的true，就是true
任意非null值，都是true
null： false
"" : false
undefined: false
NaN: false
0： false2.6.5 练习题：
在文本框中输入一个1~100的整数，计算小于等于该整数的所有素数之和三 BOM模型
3.1 BOM模型简介
browser object model（浏览器对象模型），简称bom模型。即javascript设计了一个window对象，可以通过这个对象来操作浏览器，从而可以让js与浏览器产生交互行为。
3.2 window对象
-
所有浏览器都支持 window 对象。它表示浏览器窗口。
-
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
-
全局变量是 window 对象的属性。
-
全局函数是 window 对象的方法。
-
甚至 HTML DOM 的 document 也是 window 对象的属性之一
-
window的常用属性和方法
- 对话框方法
window.alert():
window.confirm():
window.prompt("sometext","defaultvalue");
- history： 历史记录
window.history.back();
window.history.forward();
window.history.go(1); // -1 表示后退， 1表示前进，0表示刷新
- location: 窗口文件地址
location.href;
location.hostname;
location.pathname;
location.port);
location.protocol;
- screen: 当前屏幕对象
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
window.screen.width;
window.screen.height;
screen.colorDepth:色彩深度
screen.pixelDepth：色彩分辨率
- navigator: 浏览器信息
navigator.userAgent;
注意:不要依赖此属性返回正确的浏览器信息。
在大多数浏览器(如Firefox, Chrome, Safari, Opera和Internet Explorer)中，返回的字符串是都是统一的。
- document: 当前窗口显示的HTML对应的文档对象
- setInterval()/clearInterval()：周期性时钟方法
- setTimeout()/clearTimeout():一次性时钟3.3 JavaScript 计时事件
在 JavaScript中，可以做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScript 中使用计时事件是很容易的，两个关键方法是:
-
setTimeout() - 在指定的毫秒数后执行一次指定的代码。 我们可以称之为一次性时钟
-
setInterval() - 间隔指定的毫秒数重复地执行指定的代码。 我们可以称之为周期性时钟
注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。
3.3.1 setTimeout() 方法
var myVar= window.setTimeout(Function, milliseconds);
第一个参数：要执行的代码
第二个参数：执行代码的延迟时间，单位是毫秒也可以不用声明变量；不过如果你想要取消这个时钟，就需要定义变量来存储这个时钟，以便取消。
案例1：
setTimeout(
function(){
alert("Hello")
},
3000
);那么，该如何停止执行呢？
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。当然，需要在**setTimeout()**还为执行任务前，调用该方法。
语法如下：
window.clearTimeout(timeoutVariable)案例演示：
var myVar;
function myFunction(){
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction(){
clearTimeout(myVar);
}3.3.2 setInterval() 方法
window.setInterval(Function,milliseconds);
第一个参数：要执行的代码
第二个参数：重复执行的间隔时间，单位是毫秒案例演示：
var label = document.getElementById("message");
function myTimer(){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var str = hour+":"+minute+":"+second;
label.innerText = str;
}
var clock = setInterval(function(){myTimer()},1000)}那么，该如何停止执行呢？
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
语法如下：
window.clearInterval(intervalVariable);案例演示：
<p id="demo"></p>
<button οnclick="myStopFunction()">停止</button>
<script>
//....
var clock=setInterval(function(){myTimer()},1000);
function myStopFunction(){
clearInterval(clock);
}
</script>四 DOM模型
4.1 DOM模型简介
DOM 模型，全名document object model。
javaScript将HTML的所有标记封装到一个对象(document)上,在这个对象身上维护着HTML的所有层次的标记，以及关系。这样，javaScript就可以通过document对象，来访问整个HTMl文档里的所有元素了。
当浏览器加载页面时，会创建一个document对象，用于封装和操作当前页面的所有的HTML、CSS等代码。
-
js可以改变当前页面的HTML的元素
-
js可以改变当前页面的HTML的属性
-
js可以改变当前页面的CSS样式
-
js可以对当前页面的事件作出响应
DOM模式被构建成对象的树，这棵树的根就是document对象。提供了
-
查找节点
-
读取节点
-
修改节点
-
创建新节点
-
删除节点操作
4.2 DOM查找节点
如果想要操作HTML的元素，比如添加元素，删除元素等。那么就需要先查找元素。
通过 id 查找 HTML 元素
-
var x=document.getElementById("元素的id属性值") -
如果找到该元素，则该方法将以对象的形式返回该元素
-
如果未找到该元素，则返回 null。
通过标签名查找 HTML 元素
-
getElementsByTagName("标签名")：该方法可以使用document调用，也可以使用节点对象调用
-
返回的是伪数组对象。没找到，数组长度为0。
-
伪数组可以通过下标访问元素，可以访问length属性，其他的数组方法，不能使用。
通过类名查找 HTML 元素
-
getElementsByClassName("类属性值")：该方法可以使用document调用，也可以使用节点对象调用
-
返回的是伪数组对象。
通过层次关系查找 HTML 元素
-
parentNode：当前节点的父节点。即上一层的节点对象
-
childNodes：下一层的子节点，返回的依然是一个伪数组。 非常特殊，得到的子节点数*2+1个
4.3 元素相关信息
-
常用属性
- nodeName：节点的名称 树形中的每一个节点都是有名称的， 如果是文本节点，名称为#text 如果是文档节点，名称为#document - nodeType: 节点的类型。返回的是一个数字 1： 元素节点 2： 属性节点 3： 文本节点 8： 注释节点 9： 文档节点 - nodeValue: 节点的值 元素节点的 nodeValue 是 undefined 或 null 文本节点的 nodeValue 是文本本身 属性节点的 nodeValue 是属性值 - innerText: 获取的是元素中的所有文本内容 - innerHTML: 获取的是元素中的所有信息，包括标记 -
方法
- getAttribute(属性名称)：根据属性名称获取属性的值 - setAttribute()：设置属性的值 - removeAttribute():
4.4 节点创建与删除
创建节点
- 创建元素节点。当然可以设置上相关属性。
document.createElement("新节点名称")
- 创建文本节点
document.createTextNode("文本内容");添加节点
- appendChild(newNode):
将新元素作为父元素的最后一个子元素进行添加。 用父元素调用该方法
- insertBefore(newNode,reNode):
将新元素插入到某一个子元素的前面。 用父元素调用该方法
reNode：所依赖的子元素 移除节点： 如需删除 HTML 元素，您必须清楚该元素的父元素：
- removeChild(childNode)
删除节点操作，只能是删除某一个节点的子节点。替换节点：
- replaceChild(newChild,oldChild)
使用newChild新元素，替换掉oldChild旧元素五 事件Event
5.1 事件简介
当用户在与浏览器进行交互的瞬间，或者浏览器自身发生的一些事情，我们称之为javaScript事件。
比如打开某一个网页，浏览器加载完成后会触发load事件，当鼠标悬浮于某一个元素上时会触发hover事件，当鼠标点击某一个元素时会触发click事件等等。JS与HTML之间的交互正是通过事件(Event)来实现的。或者说，事件是JavaScript和DOM之间进行交互的桥梁。
事件可以概括为以下几个部分：
-
事件源 ： 触发事件的 元素/标签/节点
-
事件类型： 触发的是什么事件，比如单击，双击，鼠标移入移出等
-
事件处理程序：触发事件后要执行的逻辑代码
-
事件监听：谁管这个事情，谁监听？
闯红灯事件 事件源:车 事件类型：闯红灯 处理程序: 扣分罚款 监听：摄像头，交警等
单击事件： 事件源:html元素 事件类型：鼠标单击 处理程序:对应的函数 监听： 浏览器窗口事件的作用：
1. 验证用户输入的数据
2. 增加页面的动态效果
3. 增强用户的体验度5.2 事件模型
5.2.1 原始事件模型（DOM0级）
这是一种被所有浏览器都支持的事件模型 ，对于原始事件而言，没有事件流，事件一旦发生将马上进行处理，有两种方式可以实现原始事件：
（1）在html代码中直接指定属性值：
`<button id="demo" type="button" οnclick="doSomeTing()" `/>
（2）在js代码中为
document.getElementsById("demo").onclick = doSomeTing()-
优点：所有浏览器都兼容
-
缺点：1）逻辑与显示没有分离；2）相同事件的监听函数只能绑定一个，后绑定的会覆盖掉前面的，如：a.onclick = func1; a.onclick = func2;将只会执行func2中的内容。3）无法通过事件的冒泡、委托等机制（后面会讲到）完成更多事情。
因为这些缺点，虽然原始事件类型兼容所有浏览器，但仍不推荐使用。
5.2.2 DOM2事件模型
此模型是W3C制定的标准模型，现代浏览器（IE6~8除外）都已经遵循这个规范。W3C制定的事件模型中，一次事件的发生包含三个过程：
(1).事件捕获阶段，(2).事件目标阶段，(3).事件冒泡阶段
事件捕获：
当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。事件目标：
当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。事件冒泡：
从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。所有的事件类型都会经历事件捕获但是只有部分事件会经历事件冒泡阶段,例如submit事件就不会被冒泡。
事件的传播是可以阻止的：
-
在W3c中，使用stopPropagation（）方法
-
在IE下设置cancelBubble = true；
在捕获的过程中stopPropagation（）后，后面的冒泡过程就不会发生了。
标准的事件监听器该如何绑定：
-
addEventListener("eventType","handler","true|false");
-
removeEventListner("eventType","handler","true!false");
第一个参数eventType指事件类型， **注意不要加‘on’前缀，与IE下不同**。 第二个参数是处理函数， 第三个即用来指定是否在捕获阶段进行处理，一般设为false来与IE保持一致(默认设置)，除非你有特殊的逻辑需求。 监听器的解除也类似：
5.3 事件分类
我们知道，事件就是用户或者浏览器自身执行的某些动作，行为，例如click，load，mouseover都是事件的名字，而响应某一个事件要执行的函数，就是这个事件的事件处理程序。想要将事件处理程序与该事件关联上，或者理解为绑定，我们需要再每个事件的名字前面添加单词on。比如click事件，如果想要关联(绑定)事件处理程序，我们需要写成onclick形式。 再比如onload，onmouseover等。
我们也可以统称为绑定事件。 绑定事件分类如下：
鼠标绑定事件
| 属性 | 描述 |
|---|---|
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onmousedown | 鼠标按钮被按下。 |
| onmouseenter | 当鼠标指针移动到元素上时触发。 |
| onmouseleave | 当鼠标指针移出元素时触发 |
| onmousemove | 鼠标被移动。 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseup | 鼠标按键被松开。 |
键盘绑定事件
| 属性 | 描述 |
|---|---|
| onkeydown | 某个键盘按键被按下。 |
| onkepress | 某个键盘按键被按下并松开。 |
| onkeyup | 某个键盘按键被松开。 |
表单绑定事件
| 属性 | 描述 |
|---|---|
| onblur | 元素失去焦点时触发 |
| onchange | 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) |
| onfocus | 元素获取焦点时触发 |
| onfocusin | 元素即将获取焦点时触发 |
| onfocusout | 元素即将失去焦点时触发 |
| oninput | 元素获取用户输入时触发 |
| onreset | 表单重置时触发 |
| onsearch | 用户向搜索域输入文本，并回车时触发 ( <input="search">) |
| onselect | 用户选取文本时触发 ( <input> 和 <textarea>) |
| onsubmit | 表单提交时触发 |
5.4 event对象
当事件触发后，会自动产生一个event对象。
| 属性 | 描述 |
|---|---|
| bubbles | 返回布尔值，指示事件是否是起泡事件类型。 |
| cancelBubble | 取消事件的冒泡 |
| currentTarget | 返回其事件监听器触发该事件的元素。 |
| target / srcElement | 返回触发此事件的元素（事件的目标节点）。 |
| type | 返回当前 Event 对象表示的事件的名称。 |
| clientX | 返回当事件被触发时，鼠标指针的水平坐标。 |
| clientY | 返回当事件被触发时，鼠标指针的垂直坐标。 |