鼠标事件
1.click：用户单击鼠标左键。
鼠标按下和松开时的鼠标的光标指针在被选元素区域内部会触发。超出了被选元素区域的后代元素也算被选元素区域内部。
2.dbclick：用户双击鼠标左键触发。
鼠标第一次按下和第二次松开时，鼠标的光标指针在被选元素区域内部会触发并且鼠标第一次按下和第二次松开时的时间间隔不能太长。
3.mousedown：用户按下了任意鼠标按钮。
鼠标的光标指针在被选元素区域内按下时会触发
4.mouseup：用户抬起鼠标任意键。
鼠标的光标指针在被选元素区域内松开时触发。
5.mouseover：光标进入
鼠标的光标指针位于一个元素外部，然后用户将首次移动到另一个元素边界之内时触发（鼠标的指针进入被选元素的内部）。在父级元素绑定该事件，当鼠标指针已经在父元素内部时，又从父元素进入子元素内部也会触发（光标进入子元素，事件源是子元素会在冒泡阶段触发绑定在父元素的事件），从子元素进入父元素不会触发。
6.mouseout：光标离开
用户将光标从被选元素区域内部离开时触发。无论光标指针离开后到哪一个区域，只要离开了被选元素区域内部就会触发。
7.mouseenter：光标进入（不冒泡）
鼠标光标从被选元素区域的外部首次移动到元素范围内时触发。在父级元素绑定时，从父元素进入子级元素和从子级元素进入父级元素不会触发，从父级元素之外的区域进入父级元素或超出父级元素范围的子级元素会触发。
8.mouseleave： 光标离开（不冒泡）
光标移动到被选元素区域的范围之外时触发。在父级元素绑定时，从父级元素离开到子级元素不会触发，而从父级元素或从子级元素离开到父级元素区域之外就会触发。
9.mousemove：光标移动（持续触发）
光标在元素的内部不断的移动时触发。mousemove与 mousedown无关，相互独立
ps：1.上述所有事件除了mouseenter和mouseleave外都冒泡。
2.只有在同一个元素上相继触发mousedown和mouseup事件，才会触发click事件。同样，只有在同一个元素上触发两次click事件，才会触发dbclick事件。
3.补充：移动端没有 mousedown事件，对应的是 touchstart--touchmove--touchend
4.click事件只能监听左键，mousedown和mouseup鼠标任意键用event.button来区分鼠标的按键，0/1/2
5.events.button==0 默认。没有按任何按钮。 events.button==1 鼠标左键 events.button==2 鼠标右键
滚轮事件
鼠标滚轮事件
1.wheel：鼠标的光标指针在被选元素区域内部时鼠标滚轮滚动时会触发
元素的滚轮事件
2.scroll：被选元素自己的滚动条滚动时会触发，单位时间内被选元素自己的滚动条的位置发生变化。
文档视图或者一个元素在滚动时触发
键盘事件
1.keydown：用户按下键盘上的任意键时触发（所有键 = 输入键 + 功能键，除了Fn键）。每按一次键盘的任意键就会触发一次，如果一直按着不放，会持续触发该事件。
2.keyup：当用户释放键盘上的键时触发
3.keypress：用户按下键盘时触发（输入键：字符类键盘按键，功能键不触发）每按一次键盘的任意键就会触发一次，如果一直按着不放，会持续触发该事件。
常见的 keyCode
event.keyCode表示的是具体按的键
1.shift、ctrl、alt 对应的 event.keyCode 为 16、17、18
2.enter 对应的 event.keyCode 为 13
3.左上右下对应37、38、39、40
keydown和 keypress的区别
1.keydown可以响应任意按键(除了Fn键)按下字符时不区分大小写，keypress只可以响应字符类键盘按键（字符类键盘的字符对应有event.charCode），按下字符区分大小写，不识别功能键，比如 ： ctrl、shift、alt等
2.keypress返回 ASCII码，可以转换成相应字符（String.fromCharCode(event.charCode)，区分大小写）event.charCode会获取按下的键盘键的 Unicode 值
3.keydown常用于绑定操作类事件处理，keypress常用于绑定字符类事件处理
输入框操作事件
1.input监听：input框在聚焦状态下的文本变化。当一个 input、select、textarea 元素的 value 被修改时，会触发该事件。
当输入框绑定keydown时其区别在于input事件会监听input框的value值，而keydown事件不会监听value值的改变。
2.change监听：input框在失焦后的文本变化（与前一次失焦状态的文本对比变化）。当一个 input、select、textarea 元素的 value 被修改，并提交时，失焦并且value改变会触发该事件。
即输入框失焦后相对于失焦前其value值改变了就会触发，常用于表单的验证。
焦点事件
1.focus：得到焦点时触发（不冒泡），只在聚焦的一刻触发一次。除了是事件之外得到焦点时触发，还可以用被选元素调函数，渲染到页面时自动获焦就相当于标签的属性autofocus设置为true。
2.blur ：失去焦点时触发（不冒泡），只在失焦的一刻触发一次。除了是事件之外得到焦点时触发，也可以用被选元素调函数，让被选元素失焦。
3.focusin：focus 的冒泡版
4.focusout：blur 的冒泡版
其他事件
1.load：在 window 上，当页面加载完成后触发；在 img 上，当图片加载完成后触发；在对象元素上，当对象加载完成后触发
img.onload：图片节点加载完毕不会调用，要资源加载完毕就会调用
window.onload：等待页面所有资源下载完成才执行，包括图片资源的下载，所以它是最慢的。浏览器加载完毕：5大BOM的功能加载完成。
2.resize：事件会在窗口或框架被调整大小时发生
window.onresize：在浏览器窗口被重置时触发的，如当用户调整窗口大小，或者最大化、最小化、恢复窗口大小显示时触发 resize 事件。利用该事件可以跟踪窗口大小的变化以便动态调整页面元素的显示大小，元素始终保持与窗口固定比例的大小显示。
<body>
<div id="box"></div>
<script>
var box = document.getElementById("box"); //获取盒子的指针引用
box.style.position = "absolute"; //绝对定位
box.style.backgroundColor = "red"; //背景色
box.style.width = w() * 0.8 + "px"; //设置盒子宽度为窗口宽度的0.8倍
box.style.height = h() * 0.8 + "px"; //设置盒子高度为窗口高度的0.8倍
window.onresize = function () { //注册事件处理函数，动态调整盒子大小
box.style.width = w() * 0.8 + "px";
box.style.height = h() * 0.8 + "px";
}
function w() { //获取窗口宽度
if (window.innerWidth) { //兼容DOM
return window.innerWidth;
}
else if ((document.body) && (document.body.clientWidth)) { //兼容IE
return document.body.clientWidth;
}
};
function h() { //获取窗口高度
if (window.innerHeight) { //兼容DOM
return window.innerHeight;
}
else if ((document.body) && (document.body.clientHeight)) { //兼容IE
return document.body.clientHeight;
}
};
</script>
</body>
