概念：
在触发DOM上的某个事件时，会产生一个事件对象event,这个对象包含着所有事件相关的信息
获取事件对象 - event：
事件对象：标准浏览器的事件对象是事件处理函数中的一个隐藏的（第一个）参数，可以通过参数获取对象
document.onmousedown = function(ev){//鼠标按下 ev:事件对象
console.log(ev);
// console.log(arguments[0])
}
document.onkeydown = function(ev){//键盘按下事件
console.log(ev);
}老版本的IE浏览器默认自带event对象，无需再次声明.
//兼容的方式获取事件对象
document.onmousedown = function(ev){
var ev = ev || window.event;//兼容方式获取事件对象。
}事件类型：
1、获取焦点、失去焦点
var oInp = document.querySelector('input');
oInp.onfocus = function() {
console.log('获取焦点');
}
oInp.onblur = function() {
console.log('失去焦点');
}2、鼠标左键、右键的点击
//onclick：当用户用鼠标左键单击对象时触发
document.onclick = function() {
console.log('鼠标左键单击了');
}
//oncontextmenu：当用户使用鼠标右键单击客户区打开上下文菜单时触发
document.oncontextmenu = function() {
console.log('鼠标右键单击了');
}3、键盘的按下、弹起
// onkeydown：但用户按下键盘按键时触发
document.onkeydown = function() {
console.log('键盘按下了');
}
// onkeyup：当用户释放键盘按键时触发
document.onkeyup = function() {
console.log('键盘按键释放了');
}4、onload：在浏览器完成对象的装载后立即触发
window.onload = function() {
console.log('浏览器完成了对象装载');
}5、onmousedown：当用户用任何鼠标按钮单击对象时触发
document.onmousedown = function() {
console.log('使用鼠标单击了对象');
}6、onmouseup：当用户在鼠标位于对象之上时释放鼠标按钮时触发
document.onmouseup = function() {
console.log('鼠标在对象上释放了');
}7、onmousemove：鼠标在某个区域内进行移动
document.onmousemove = function() {
console.log('鼠标在此区域内移动');
}8、onmouseover：当用户将鼠标指针移动到对象内时触发
document.onmouseover = function() {
console.log('鼠标指针移动到对象内时触发');
}9、onmouseout：当用户将鼠标指针移出对象边界时触发
document.onmouseout = function() {
console.log('鼠标指针移出对象边界时触发');
}10、onresize：当对象的大小将要改变时触发
window.onresize = function() {
console.log('对象的大小将要改变时触发');
}11、onscroll：当用户滚动对象的滚动条时触发
window.onscroll = function() {
console.log('用户滚动对象的滚动条时触发');
}event属性：
鼠标
1.标准浏览器的鼠标事件，会有一个button属性，它是一个数字，代表鼠标按键。
0代表鼠标按下了左键 1代表按下了滚轮 2代表按下了右键
document.onmousedown = function(e) {
var e = e || window.event;
alert(e.button);
}2.which属性：获取鼠标的按键和键盘的键码(键盘按键Unicode编码),低版本浏览器不支持
1代表鼠标按下了左键 2代表按下了滚轮 3代表按下了右键
enter -> 13 space -> 32
document.onmousedown = function(e) {
var e = e || window.event;
alert(e.which);
}
document.onkeydown = function(e) {
var e = e || window.event;
alert(e.which);
}3.鼠标事件中获取鼠标的位置属性
clientX,clientY：鼠标相对于可视区的位置
document.onmousemove = function(e) {
var e = e || window.event;
console.log(e.clientX, e.clientY);
}pageX,pageY：鼠标相对于文档的位置
document.onmousemove = function(e) {
var e = e || window.event;
console.log(e.pageX, e.pageY);
}offsetX,offsetY：鼠标相对于操作元素(鼠标位置)到元素边缘(左上)的位置；鼠标相对于当前操作元素左上角的距离,和定位没有关系
document.querySelector('.box').onmousemove = function(e) {
var e = e || window.event;
console.log(e.offsetX, e.offsetY);
}screenX,screenY :鼠标相对于屏幕的位置
document.onmousemove = function(e) {
var e = e || window.event;
console.log(e.screenX, e.screenY);
}键盘
1.键盘事件的类型
onkeydown + onkeyup = onpress
2.which具有兼容问题，低版本IE浏览器不支持。
//keyCode:keyCode和which 获取键盘上按键对应的unicode编码
document.onkeydown = function(ev){
var ev = ev||event;
alert(ev.keyCode);
}
//案例：WASD控制一个盒子移动
var oBox = document.querySelector('.box');
document.onkeydown = function(ev){
var ev = ev||event;
if(ev.keyCode === 65){
oBox.style.left = oBox.offsetLeft - 5 +'px';
}
if(ev.keyCode === 68){
oBox.style.left = oBox.offsetLeft + 5 +'px';
}
if(ev.keyCode === 83){
oBox.style.top = oBox.offsetTop + 5 +'px';
}
if(ev.keyCode === 87){
oBox.style.top = oBox.offsetTop - 5 +'px';
}
}3.常见的键码
组合键event.ctrlKey、event.altKey、event.shiftKey 分别代表ctrl alt shift键
浏览器的默认行为：
1.javascript中的默认行为是指javascript中事件本身具有的属性，如<a>标签可以跳转，文本框可输入文字、字母、图片路径等，右键浏览器会出现菜单等行为便被称为浏览器的默认行为。
2.阻止浏览器的默认行为
ev.preventDefault(); 标准浏览器阻止默认事件,DOM事件使用此方法取消默认事件。
ev.returnValue = false; 非标准浏览器（IE8）阻止默认事件
事件流：
1.事件流描述的是从页面中接收事件的顺序。
2.事件流包括三个阶段：事件捕获阶段、目标阶段(当前操作的元素)和事件冒泡阶段。
3.两大浏览器运营商：微软(microsoft) 网景(netscape)
微软(microsoft) - 冒泡
网景(netscape) 捕获
4.IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点,一直到文档document
