事件相关内容
1、事件
（1）事件源：触发事件的源头
（2）事件类型：什么行为
（3）事件处理函数：触发行为时要做什么事，触发事件源的对应的事件类型时，直接被执行的函数
（4）事件对象：记录事件发生的所有信息
2、事件类型
（1）鼠标类
1）onclick：点击
2）ondblclick:双击
3）onmousedown：按下
4）onmouseup：抬起
5）onmouseover|onmouseenter：进入
6）onmouseout|onmouseleave：离开
7）onmousemove：移动
8）oncontextmenu：右键单击
9）onwheel：滚轮滚动
（2）键盘类
Tip：键盘事件只能加给具有焦点的元素或document
1）onkeydown：按下任意键
2）onkeyup：释放任意键
3）onkeypress：抬起并按下
（3）表单控件类
1）onblur：失去焦点
2）onfocus：获取焦点
3）oninput：输入
4）onchange：改变
5）onsubmit：提交（只能用于from标签）
6）onreset：重置（只能用于from标签）
7）onselect：选中
（4）页面类
1）onload：页面加载结束后要做什么
2）onscroll：页面发生滚动
属性：页面滚走的距离 （可读可写）
document.documentElement.scrollTop --> 垂直方向滚动的距离 document.documentElement.scrollLeft --> 水平方向滚动的距离
3）onresize：窗口或框架的大小发生改变
属性：页面内容区的尺寸（只读）
document.documentElement.clientWidth --> 页面内容区的宽度 document.docuementElement.clientHeight --> 页面内容区的高度
3、事件对象
（1）特点：
默认不显示，需要手动获取；
只有在事件中存在，在事件还没有开始前或结束后，都无事件对象；
事件对象只跟着事件走，类似于局部变量；
事件结束后事件对象会被浏览器（window）回收。
（2）事件对象的获取 （有兼容）
兼容方式：
functioin fn(eve) {
var e = eve || window.event;
}
Tip：event只存在于事件中，外部不可用，使用时window不可以省掉
（3）如何通过事件对象获取事件源
e.target
4、鼠标事件的常用属性
（1）检测按下的鼠标按键 --> button | buttons
obox.onmousedown = function(eve){g
var e = eve || window.event;
console.log(e.button); //左键：0 滚轮：1 右键：2
console.log(e.buttons); //左键：1 滚轮：4 右键：2
}
（2）检测鼠标相对于浏览器左上角的位置 --> clientX | clientY
obox.onmousedown = function(eve){
var e = eve || window.event;
console.log(e.clientX); //水平方向的位置
console.log(e.clientY); //垂直方向的位置
}
（3）检测相对于html文档的左上角的位置 --> pageX | pageY
obox.onmousedown = function(eve){ var e = eve || window.event; console.log(e.pageX); //水平方向的位置 console.log(e.pageY); //垂直方向的位置 }
Tip: 不支持IE8-
（4）检测相对于显示器屏幕左上角的位置 --> screenX | screenY
obox.onmousedown = function(eve){
var e = eve || window.event;
console.log(e.screenX); //水平方向的位置
console.log(e.screenY); //垂直方向的位置
}
（5）检测相对于事件源左上角的位置 --> offsetX | offsetY
obox.onmousedown = function(eve){
var e = eve || window.event;
console.log(e.offsetX); //水平方向的位置
console.log(e.offsetY); //垂直方向的位置
}
5、事件冒泡
当触发某个元素的某个事件时，它会先触发自己的对应事件，然后再依次向上触发所有父级中相同的事件，如果中间的某个父级没有相同的事件，会继续向上触发。
由于事件冒泡的既有好也不好，当用不到的时候就需要阻止事件冒泡。
事件冒泡的阻止（有兼容）：
function stopBubble(e) {
if(e.stopPropagation) {
e.stopPropagation(); //非IE
}else {
e.cancelBubble = true; //IE
}
}
6、键盘事件及其相关属性
事件源：document或其他具有焦点的属性
如何知道按下的是哪个键？ --> keyCode（事件对象的属性）
keyCode 值为十进制 也是对应的ASCII码 通过keyCode找得到对应的键盘按键
document.onkeydown = function(eve) {
var e = eve || window.event;
if(e.keyCode == 65) {
console.log("A");
}
}
keyCode存在兼容问题，兼容的解决：
var code = e.keyCode || e.which;
特殊键：
1）Ctrl键
属性：ctrlKey
取值：true | false
当按下其他键时值为false，按下Ctrl键时取值为true
2）shift键
属性：shiftKey
取值同上。
3）alt键：
属性：altKey
取值同上。
Tip: 常用见取值 --> 左键：37，上键：38，右键：39，下键：40，回车键：13，空格键：32，Backspace键：8
7、默认事件
我们没有设置，但是系统默认有的事件 ==> 默认事件或默认行为
如何阻止默认事件？（有兼容）
//方法一：
function stopDefault(e) {
if(e.preventDefault) {
e.preventDefault(); //非IE
}else {
e.returnValue = false; //IE
}
}
//方法二：(无兼容）
return false;
8、事件的绑定方式
（1）赋值式（DOM0级事件绑定）
常用 、简单、没有兼容
绑定方式：
obox.onclick = fn; obox.onclick = function() {//操作} obox.onclick = function() {fn();}
删除方式：
obox.obclick = nll;
（2）事件监听式（DOM1级事件绑定）
有兼容
兼容的解决：
绑定方式：
function addEvent(ele,type,fn) { if(ele.addEventListener){ ele.addEventListener(type,fn); }else if(eve.attachEvent){ ele.attachEvent("on"+type,fn); } else { ele["on"+type] = fn; } }
删除监听：
1 function removeEvent(ele,type,fn) {
2 if(ele.removeEventListener){
3 ele.removeEventListener(type,fn);
4 }else if(eve.detachEvent){
5 ele.detachEvent("on"+type,fn);
6 } else {
7 ele["on"+type] = fn;
8 }
9 }
9、事件流的三个阶段
（1）冒泡阶段 （从里向外） ==> 默认阶段
（2）目标阶段 （当前阶段）
（3）捕获阶段 （从外向内）
Tip：由于赋值式绑定事件无法做捕获，而且IE不支持捕获，所以直接用addEventListener(type,function,boolean)来触发捕获
addEventListener(type,function,boolean)中第三个参数为捕获位，默认取值为false(即没有触发捕获),当为true时，触发捕获
Tip2：当处于当前事件源时，为目标状态，不存在捕获和冒泡，事件的执行顺序取决于书写状态；在两个元素之间时，先执行捕获，等捕获的执行完后，再执行冒泡。
10、事件委托：
概念：将多个相同元素的相同事件，添加给页面上现存的共同的父级，和事件冒泡，配合事件源，找到真正的点击的元素。
使用的原因：同一时间只能触发一个事件，其他没有被触发的事件一致处于等待的状态，占内存。
优点：1）节省性能；2）可以给页面上暂时不存在的元素绑定事件
缺点：this不再好用（找不到我们想找的元素）
事件委托的封装：
1 function fn(child,callback) {
2 // 修改fn的返回值为函数，作为将来真正的事件处理函数
3 return function(eve) {
4 //找到事件对象身上的事件源
5 var e = eve || window.event;
6 var target = e.target || e.srcElement;
7 //遍历传进来的要委托的元素
8 for(var i=0;i<child.length;i++) {
9 //逐个与事件源的元素作比较，相同了就找到了真正要触发的元素
10 if(child[i] === target) {
11 // 执行用户传进来的回调函数，完成用户指定的功能的同时，修改this的指向，使其为真正的事件源
12 callback.bind(target)();
13 }
14 }
15 }
16 }
