事件驱动
js控制页面的行为是由事件驱动的。
什么是事件？（怎么发生的）
事件就是js侦测到用户的操作或是页面上的一些行为
事件源（发生在谁身上）
引发事件的元素
事件处理程序（发生了什么事）
对事件处理的程序或函数
事件对象（用来记录发生事件时的相关信息）
只有在事件发生的时候，才会产生事件对象，无法手动创建，并且事件对象只能在处理函数内部访问，处理函数允许 结束后该对象自动销毁
事件对象的概念和作用
例子：老大说，你去帮我办个事
你说，遵命。
老大说，给你配个对象兼秘书，叫event(伊文)，比较羞涩，用的时候，得叫她出来，平时需要隐藏起来
通过这个故事可以得知：
老大是浏览器
你是事件源；让你做的事是事件处理程序；走着去 是点击事件等
女秘书，就是事件对象，向你提供完成这件事的所有帮助
每做一件事，老大给配不同的秘书 / 每个事件都有不同的事件对象
1.事件有对象！叫事件对象(event)
2.事件对象是浏览器给的
3.事件对象不叫不出来
什么是event事件对象？
用来记录一些事件发生时的相关信息的对象，每次事件发生的时候，会在函数或方法内部产生一个事件对象，这个事件对象就是event。
特征：
1.只有当事件发生的时候才会产生，只能在处理函数内部访问
2.处理函数运行结束后自动销毁
获取方式（兼容问题）
怎么把贴身小秘书event叫出来呢？
如何获取event事件？
事件对象需要作为参数传入事件。
function fn(event){
console.log(event)
}
或者
function(){
console.log(arguments[0])
}
缺德定律再现！
IE中： window.event
正常浏览器中： 对象.on事件 = function(event){}
兼容方式：
function fn(eve){
var e = eve || window.event;
}
document.onclick = function(eve){
var e = eve || window.event;
console.log(e);
}
注意：event需要逐层传递，不要疏忽外部的function
在W3C标准中：事件可以写在行内，但是因为结构和行为要分离，所以我们一半情况下用JS的方法来绑定事件，只有在极少数情况下，才将事件写在行内。
行内事件又叫：HTML事件处理程序
事件的绑定方法：
浏览器中的节点(节点).on事件名 = function(){ 要干什么？(放在浏览器中，不执行，当事件发生的时候再执行) }
总结：事件就是给浏览器定义一个预处理函数，当事件触发的时候，执行函数，这就是事件。
鼠标事件
/* onclick：点击某个对象时触发 ondblclick：双击某个对象时触发 onmouseover：鼠标移入某个元素时触发 onmouseout：鼠标移出某个元素时触发 onmouseenter：鼠标进入某个元素时触发 onmouseleave：鼠标离开某个元素时触发 onmousedown：鼠标按下时触发 onmouseup：鼠标抬起时触发 onmousemove：鼠标被移动时触发 onwheel：鼠标滚轮滚动时触发 oncontextmenu：点击鼠标右键时触发 */
鼠标事件常用属性介绍
老大给的美女对象event能用来做什么？
检测按下的鼠标按键：event.button
返回值为0，左键；返回值为1，中键；返回值为2，右键
检测相对于浏览器的位置：clientX和clientY
当鼠标事件发生时，鼠标相对于浏览器左上角的位置
检测相对于文档的位置：pageX和pageY
当鼠标事件发生时，鼠标相对于文档左上角的位置。（IE7/8无）（类似于event.clientX和event.clientY）
检测相对于屏幕的位置：screenX和screenY
当鼠标事件发生时，鼠标相对于屏幕左上角的位置
检测相对于事件源的位置：offsetX和offsetY
当鼠标事件发生时，鼠标相对于事件发生元素左上角的位置
键盘事件
/* onkeydown：键盘的键按下时触发 onkeyup：键盘的键放开时触发 onkeypress：按下或按住键盘键时触发 */
得知按下的键盘上的哪个键：keyCode
贴身女秘书还能做点啥？
event.keyCode 返回当前按键的ASCII码
空格 32
回车 13
左 37
上 38
右 39
下 40
兼容问题： var eve = eve || window.event
var keyC = eve.keyCode || eve.which
案例：通过键盘上下左右，控制页面中的元素位置移动
ctrlKey 判断ctrl是否被按下，按下返回true
shiftKey 判断shift是否被按下，按下返回true
altKey 判断alt是否被按下，按下返回true
框架/对象事件
/* onresize：浏览器窗口大小改变时触发 onabort：图形的加载被中断时触发 onload：元素加载完时触发 onerror：当加载文档或者图片时（没找到）发生的错误时触发 onscroll：文档滚动时触发 onpageshow：用户访问页面时触发 onunload：用户退出页面时触发 */
表单事件
/* onfocus：元素获得焦点时触发 onblur：元素失去焦点时触发 onchange：元素内容改变时触发 oninput：元素获取用户输入时触发 onsubmit：提交按钮时触发 onreset：重置按钮时触发 onselect：文本被选中时触发 */
拖动事件
/* ondrag：元素正在拖动时触发 ondragend：用户完成元素拖动时触发 */
多媒体事件
/* onplay：在视频/音频开始播放时触发 onended：在视频/音频播放结束时触发 onpause：在视频/音频暂停时触发 */