你的点赞就是继续前行的动力，嘻嘻!
事件的作用：
(1)各个元素之间可以借助事件来进行交互
(2)用户和页面之间也可以通过事件来交互
(3)后端和页面之间也可以通过事件来交互（减缓服务器的压力）
ps：注意：事件通常与函数配合使用，当事件发生时函数才会执行。
2. 事件传递
js中规定：
事件不仅能够和触发者交互，还会在特定的情况下沿着dom tree逐级传递，和dom tree中的各个节点进行交互。而js中的这种机制被称为事件传递机制。
事件传递方式主要分两种：事件冒泡、事件捕获
事件冒泡（IE提出）
事件从最具体的元素开始，沿着DOM树逐级向上依次触发，直至最不具体的元素停止。
事件捕获
事件从最不具体的元素开始，沿着DOM树逐级向下依次触发，直至达到最具体的元素停止。
绑定操作发生在HTML代码中的事件，称为HTML事件。
语法：on+事件=‘函数();函数();函数();……‘
例如：
ps：HTML事件采用冒泡机制来处理事件。即
点击d2时会先执行d2的绑定事件（即执行test2函数）。
然后采用事件冒泡将事件传递给上一级DOM节点d1，然后d1执行自己的绑定事件。
pss：函数执行的顺序按照绑定事件时函数的顺序为准
HTML事件的移除方式：
元素.setAttribute(‘on+事件名’，null);
eg:d1.setAttribute(‘onclick’,null);
HTML事件缺陷：耦合性太强了，修改一处另一处也要修改。
当函数没有加载成功时，用户去触发事件，则会报错。
在js脚本中，直接通过【on+事件名】方式绑定的事件称为是DOM0级事件。
语法：元素.on+事件名 = function(){需要执行的语句;}
例如：
btn.onclick = function () {console.log(‘按钮被点击’);};
ps：以冒泡机制来处理事件，不存在兼容的问题
DOM0级事件的移除方式：
元素. on+事件名=null;
eg:btn.οnclick=null;
DOM0级事件缺陷：
一次只能绑定一个触发函数。如果同时绑定多个触发函数，则以最后一个为准。
btn.onclick = function () {console.log(‘按钮被点击11111’);};
btn.onclick = function () {console.log(‘按钮被点击22222’);};
btn.onclick = function () {console.log(‘按钮被点击66666’);};
点击按钮触发函数是最后一个，输出66666。
在js脚本中，通过addEventListener函数绑定的事件称为是DOM2级事件。
语法：元素.addEventListener(type,listener,useCapture)
type:事件类型。【没有on！没有on！没有on！】
listener:监听函数，绑定的函数
useCapture:是否使用捕获机制。如果不写，默认值为false
false:冒泡机制
true：捕获机制
注意:DOM2级事件可以绑定多个函数，执行顺序按照函数书写的顺序。
例如：
btn.addEventListener('click',function() {console.log('d2');},true);
btn.addEventListener('click',function() {console.log('d22');},true);
上述代码表示给btn节点添加了两个dom2级点击事件。事件传递采用事件捕获方式传递。
DOM2级事件的移除方式：
node.removeEventListener(type,外部函数名,useCapture)
eg：btn.removeEventListener(‘click’,test,true);
ps：DOM2级事件中如果绑定函数为【匿名函数】则无法删除。能够删除的只能是外部函数。
//绑定匿名函数
d1.removeEventListener(‘click’,function () {console.log(‘d1’);},true); //绑定外部函数 function test() {console.log(‘d1’);} d1.addEventListener(‘click’,test,true); d1.removeEventListener(‘click’,test,true);
pss：第三个参数默认可以不写，默认是false。但是如果删除的是捕获事件，则必须写为true才可以。
鼠标单击触发：click
鼠标双击触发：dblclick
鼠标按下时触发：mousedown
鼠标抬起时触发：mouseup
鼠标移动时触发：mousemove
鼠标移入时触发(不冒泡)： mouseenter
鼠标移出时触发(不冒泡)： mouseleave
鼠标移入时触发(冒泡)： mouseover
鼠标移出时触发(冒泡)： mouseout
语法：元素.on+鼠标事件名称 = 调用函数
例如：d1.ondblclick = function () { console.log(‘这是d1’);};
a.鼠标的基本事件默认采用冒泡传递
b.可以给一个元素添加多个不同的鼠标事件，不同的鼠标事件之间互不影响
c.mouseenter和mouseleave两个事件不冒泡触发。
焦点：js当前正在和用户发生交互的节点称为焦点。可以类比为人类目光汇聚的地方。
语法：获得焦点和失去焦点事件既可以使用DOM0绑定也可以使用DOM2绑定
i1.addEventListener(‘focus’, function () {console.log(‘i1捕获事件’);}, true);
i1.addEventListener(‘blur’, function () {console.log(‘i1捕获事件’);}, true);
i2.onfocus = function () {console.log(“i2获得了焦点”)};
i2.onblur = function () {console.log(“i2失去了焦点”)};
注意：
这两个事件均不支持事件冒泡(只有当前节点发生调用)。
如果需要连续多次的触发，则需要使用DOM2级绑定事件中的捕获事件来达到
案例：用来判断输入框内的东西是否满足要求
‘’’
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>lesson1</title>
<style>
.colorRed{ color:red; }
.colorGreen{ color:green; }
.borderRed{ border:2px solid red; }
.borderGreen{ border:2px solid green; }
</style>
</head>
<body>
<span>用户名：</span>
<input type="text" class="userName"/>
<span class="userNameSpan"></span>
<br/>
<button>获得焦点</button>
<script>
var userNameInput = document.querySelector('.userName');
var userNameSpan = document.querySelector('.userNameSpan');
var btn = document.querySelector('button');
btn.onclick = function () {
userNameInput.focus();//当按钮点击的时候，主动让input获得焦点。
userNameInput.blur();
userNameInput.focus();
};
userNameInput.onblur = function () {
if(userNameInput.value.length == 11){
userNameSpan.innerHTML = '正确';
/*只要是系统提供的属性，大多在js中可以直接访问*/
userNameInput.className = 'borderGreen';
userNameSpan.className = 'colorGreen';
}else{
userNameSpan.innerHTML = '请输入11位正确手机号';
userNameInput.className = 'borderRed';
userNameSpan.className = 'colorRed';
}
};
</script>
</body>
</html>
scroll事件会在【文档】或【元素】发生滚动操作时触发。
【文档发生滚动时】
属性scrollTop\scrollLeft表示文档滚动的距离:(没有单位)
IE：document.documentElement.scrollTop\Left
非IE：document.body.scrollTop\Left
（可以使用document.body.scrollTop||document.documentElement.scrollTop来解决兼容性）
例：
window.onscroll = function () {
var top = document.body.scrollTop||document.documentElement.scrollTop;
var left = document.body.scrollLeft||document.documentElement.scrollLeft;
console.log('top:'+top+'left:'+left);
};
【元素发生滚动时】
元素发生滚动时并不存在兼容性的问题，但是需要有一个前提那就是：必须存在滚动条。
(元素的滚动条属性可以同过overflow:scroll/overflow-x:scroll/overflow-y:scroll来实现)
在元素发生滚动的时候，可以通过【元素.scrollTop/scrollLeft】获取到元素的位移距离。
例如：
var div = document.querySelector('div');
div.onscroll = function () {
console.log(div.scrollTop);
};
当然，上述例子中div必须得有内容，而且还要保证内容高度要大于实际高度才行。
//css代码
body { height: 2000px; width: 2000px; }
//html代码
<p class="p1">点击一下</p>
//js代码
var p1= document.querySelector('.p1');
p1.onclick = function () {
document.body.scrollLeft = 2000;
document.body.scrollTop = 2000;
};
完成的功能，点击这个div块之后就会跳到页面的右下角。
键盘事件是指当用户在操作键盘的时候会自动被触发的事件，通常有以下三种：
(1) keydown:用户按下任意键都可以触发这个事件。如果按住不放，事件会被连续触发。
(2) keypress:用户按下任意键都可以触发这个事件(功能键除外)。如果按住不放，事件会被连续触发
(3) keyup: 用户释放按键时触发
ps：键盘事件一般绑定在需要用户输入的元素上(例如input)，但是由于键盘事件默认采用事件冒泡机制，因此将键盘事件直接绑定在body之上也是允许的。
在键盘事件中可以通过event.keycode来获取按下按键的编码值。
input1.onkeydown = function () {
console.log("down:"+event.keyCode);
};
ps：因此我们可以通过这个属性来获取到，在页面中用户曾按下过哪些按键。
pss：常见的按键编码【回车：13】【backspace：8】
3.keydown和keypress事件的区别
(1)keyPress主要用来捕获：数字(包括Shift+数字的符号)、字母（包括大小写）、小键盘等能够显示在屏幕中的字符。但是不能对系统功能键(例如：后退、删除等，其中对中文输入法不能有效响应)进行正常的响应
而KeyDown和KeyUp通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键）
(2)捕获字符长度区别
KeyPress只能捕获单个字符
KeyDown和KeyUp可以捕获组合键。
(3)捕获字符大小写识别区别
KeyPress可以捕获单个字符的大小写
KeyDown和KeyUp对于单个字符捕获的KeyCode都是一个值，也就是不能判断单个字符的大小写。
(4)捕获字符数字区别
KeyPress不区分小键盘和主键盘的数字字符。
KeyDown和KeyUp区分小键盘和主键盘的数字字符。
(1)touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。 (2)touchmove:当手指在屏幕上滑动时连续的触发。
(3)touchend:当手指从屏幕上移开时触发。 (4)*touchcancel:当系统停止跟踪触摸时触发。(如电话接入或者弹出信息,一般在这个操作中来做一些暂停游戏类的操作)
div.addEventListener('touchstart',function () {console.log("touches began");});
div.addEventListener('touchend',function () {console.log("touches end");});
div.addEventListener('touchmove',function (event) {console.log("touches move");});
div.addEventListener('touchcancel',function(event){console.log("cancel");});
ps：如非特殊说明，事件均为冒泡事件
pss：手机触摸事件必须使用dom2来进行绑定
psss：可以给一个元素添加多个触摸事件
事件对象，即【事件触发的时】用来保存【事件相关的所有信息的对象】。
事件对象基本都是系统为我们自动生成，不必手动创建。
以上事件都存在事件对象：
div.addEventListener(‘touchstart’,
function (event) {
console.log(“touches began”);
}
);
(1)touches:表示当前跟踪的触摸操作的Touch对象的数组(当前屏幕上所有的触摸点列表)。
(2)targetTouches:特定于事件目标的Touch对象的数组(当前对象上所有的触摸点列表)。
(3)changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组（涉及当前事件的触摸点列表）。
触摸对象，即【事件对象的touches属性】中的每一个元素。
一次触摸会创建一个触摸对象。
触摸对象中提供了很多属性方便我们获取和使用：
clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier：表示触摸的唯一ID。
pageX：触摸目标在页面中的x坐标
pageY：触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标
通常情况下都会在触摸事件被触发的时候，通过这两个属性来获取当前节点的位置。
概念：this代表【函数运行时】【自动生成的】一个【用来指代函数调用者】的对象，this只能在函数内部使用。
eg：
function test(){
console.log(this);
}
test();//指向window，因为函数的调用者默认是window
document.addEventListener(‘click’,test);//指向document节点
document.querySelector(‘div’).addEventListener(‘click’,test);//指向div节点
根本原则：函数的调用者是谁，this就是谁
当dom tree中某个事件被触发的时候，会同时自动产生一个用来描述事件所有的相关信息（比如出发事件的元素、或者是事件的类型）的对象，这个对象就是event（事件对象）。
获取方式：
(1)直接通过event来获取
(2)还可以通过函数传参数的形式来使用，一般而言我们使用【形参e或eve】来代替
document.querySelector("#d1").onclick = function(e){
console.log(e);
};
document.querySelector("#d1").onmousemove = function(eve){
console.log(eve);
};
document.querySelector("#d1").onclick = function(){
console.log(event);
};
【type属性】
type属性用来获得【当前触发事件】的类型，此属性只读。
document.getElementById(“d1”).onclick = function () {
console.log(event);
console.log(event.type); //依赖于事件的触发而存在，只读属性
};
【bubbles 属性】
bubbles属性用来获得【当前触发事件的类型】是否冒泡，如果当前事件类型支持冒泡则返回true，否则返回false。
【eventPhase 属性】
eventPhase：事件传导至【当前节点】时处于什么的状态。
1：事件处于捕获状态
2：事件处于真正的触发者
3：事件处于冒泡状态
【target 属性和 currentTarget 属性】
target：返回事件真正的触发者
currentTarget：返回事件的监听者(触发的事件绑定到了哪个节点，就返回谁)
<div id="d1">d1
<div id="d2">d2</div>
</div>
document.getElementById("d1").onclick = function (e) {
console.log(e.target);
console.log(e.currentTarget);
};
为了在不同的浏览器下解决获取target的兼容性问题，可以采用如下的写法：
var target = eve.target || eve.srcElement