事件
事件,就是函数在某种状态下被调用.JS捕捉到的发生在网页上的行为,官方称为事件句柄,是交互体验的核心功能
事件的三要素: 1 事件源 2 事件类型 3 事件处理程序
绑定事件
1.行内绑定方式 在标签行内 的事件值上写上标志"javaScript:后跟js代码"
<a href="javaScript:alert(666)">点我</a>
<a href="javaScript:void(0)">点我</a>
<button onclick="javaScript:alert(666)">点我</button>
2.元素属性绑定方式
ele.onxxx=function(event){}
//兼容性很好，但是一个元素的同一个时间上只能绑定一个处理程序
//句柄式写法，基本等同于写在HTML行间上
3.同元素多处理程序绑定方式1
obj.addEventListener(type,fn,false)
//IE9以下不兼容，可以为一个事件绑定多个处理程序
//第三个参数表示是否捕获阶段触发,跟冒泡没关系(笔试陷阱题)
4.同元素多处理程序绑定方式2
obj.attachEvent('on'+type,fn);
//IE专有( ie11例外)，一个事件同样可以绑定多个处理程序
// <meta http-equiv="X-UA-Compatible" content="IE=10" />，解决 IE11向后兼容 IE10的问题
5.多元素同事件同处理程序绑定方式==>代理模式
box.onclick=function(e) {
e.target
}
//父元素绑定事件 通过事件对象来区分用户触发的事件属于哪一个具体的对象
事件解绑
1、ele.onclick=false/''/null;
2、ele.removeEventListener(type,fn,false);
3、ele.detachEvent("on"+type,fn);
ps:2,3若绑定的是匿名函数，则永远无法解除
事件中的this和事件对象
1.行内:
<button type="button" onclick="fn(this)">xxx</button>
<script type="text/javascript">
function fn (e) {
console.log(e,this)//btn和window
}
</script>
//行内绑定时 行内的环境对象是btn 函数的调用者是window 无法获取事件对象
2.元素属性: this指向的是dom元素本身 事件对象在参数中
3.addEventListener: this指向的是dom元素本身 事件对象在参数中
4.attachEvent: this指向 window 事件对象在参数中
事件响应链
1.事件的三个阶段: 先捕获，后目标，再冒泡,只能有一个阶段触发程序执行,比如捕获阶段触发了到了冒泡阶段就不再触发
事件经过所有元素都没有被处理,这个事件消失
事件传递的过程 只跟文档树的结构有关系 跟界面显示的层叠效果没有任何关系
事件冒泡：结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）
事件捕获:结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）
2.默认在冒泡的时候执行事件:onclick/attach和 addEventListener传false的时候
3.addEventListener绑定事件，如果把第三个参数设置为true，则在捕捉的时候执行事件
3.整个事件处理过程，会有个event事件对象在整个事件过程传播（W3C标准，ie8及其以下没有）
4.ie8以下不支持addEventListener
5.focus,blur,change,submit,reset,select等事件不冒泡
阻止冒泡和系统默认事件
1、阻止事件冒泡: W3C标准 event.stopPropagation();但不支持 ie9以下版本
stopImmediatePropagation() 支持stopPropagation的浏览器中也可以用stopImmediatePropagation()方法，这个不仅会阻止事件向祖元素的冒泡，也会阻止同一个节点上同一事件的其他的事件处理程序(优先级比它低的,同元素同事件多处理程序时)
event.cancelBubble=true; ie8及ie8以下可用
2、阻止默认事件: 默认事件——表单提交，a标签跳转，右键菜单等等
return false; 以对象属性的方式注册的事件才生效，用addEventListener/attachEvent这种是不生效的
event.preventDefault(); W3C标准，IE9以下不兼容
event.returnValue=false;兼容IE
事件类型
鼠标事件
1、click、 mousedown、mousemove、mouseup、dblclick、 contextmenu、mouseover、mouseout、mouseenter(html5标准)、mouseleave(html5标准) a) mousedown-->mouseup-->click b) mousedown是鼠标按下一次就只触发一次； c) mousemove与 mousedown无关，相互独立； d) 补充：移动端没有 mousedown事件，对应的是 touchstart--touchmove--touchend
2、DOM3标准规定：click事件只能监听左键，mousedown和 mouseup来判断鼠标键,event.button来区分鼠标的按键，0/1/2
键盘事件
1、keydown、keyup、keypress a) keydown-->keypress-->keyup b) keydown在按键按下之后会一直不断被触发
2、keydown和 keypress的区别 a) keydown可以响应任意按键(除了Fn键)，keypress只可以响应字符类键盘按键（event.charCode） b)keypress返回 ASCII码，可以转换成相应字符（String.fromCharCode(event.charCode)，区分大小写） // keydown常用于绑定操作类事件处理，keypress常用于绑定字符类事件处理
输入框操作事件
1、input、focus、blur、change a) input监听 input框在聚焦状态下的文本变化，例：百度搜索 b) change监听 input框在失焦后的文本变化（与前一次失焦状态的文本对比变化） c) focus和blur只在聚焦和失焦的一刻触发一次
其他事件
1、scroll scroll：常用于绑定在window对象上,滚动鼠标时触发 window.onscroll=func
//wheel 它是鼠标的
2、load load：等待网页资源下载完毕再执行
img.onload 图片节点加载完毕不会调用 要资源加载完毕就会调用
window.onload：等待页面所有资源下载完成才执行,包括图片资源的下载，所以它是最慢的 网页加载顺序：url-->下载页面-->domTree，cssTree并行-->渲染树renderTree-->绘制页面-->继续下载图片资源，下载完毕再放到页面上去onload domTree：domTree的形成，是先把元素翻译成的节点对象挂到 domTree上去，再把属性 img_src放到渲染树上去
事件对象
事件对象
事件对象上存储着事件发生时的相关信息(例如:event.which)
a) 事件处理函数形参ev(event)，W3C制定的标准，IE9以下不行
b) 全局对象 window.event用于IE9以下
// 兼容性写法 var event= ev|| window.event
事件对象携带的信息
事件源对象：
event.target 火狐只有这个
event.srcElement IE6/78只有这个
这两个chrome都有
兼容性写法 var ele=event.target|| event.srcElement
鼠标事件触发时:
altKey 鼠标事件发生时，是否按下alt键,返回一个布尔
ctrlKey 鼠标事件发生时，是否按下ctrl键,返回一个布尔
metaKey 鼠标事件发生时，是否按下windows/commond键,返回一个布尔
shiftKey 鼠标事件发生时，是否按下shift键,返回一个布尔
pageX 鼠标点击的 X 坐标；(包含body隐藏的)
pageY 鼠标点击的 Y 坐标；(包含body隐藏的)
clientX clientY返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素(不包括body隐藏的)
screenX screenY返回鼠标位置相对于屏幕左上角的坐标，单位为像素
movementX，movementY返回一个位移值，单位为像素，表示当前位置与上一个mousemove事件之间的距离
offsetX/offsetY 相对于元素自己的x/y 跟它是否是定位的元素无关
键盘事件触发时:
charCode/keyCode 键码值 key 键码
37左
38上
39右
40下
13enter
