用户在网页中的行为即为事件。
事件类型
鼠标事件左键单击：click
box.onclick = function() {
console.log('左击');
}
右键单击：contextmenu
box.oncontextmenu = function() {
console.log('右击');
}
双击:dblclick
box.ondblclick = function() {
console.log('双击');
左键按下：mousedown
box.onmousedown = function() {
console.log('按下')}
左键弹起：mouseup
box.onmouseup = function() {
console.log('按下')}
鼠标移入：mouseover/mouseenter
box.onmouseover = function() {
console.log('移入了')}
box.onmouseenter = function() {
console.log('移入了')};
鼠标移出：mouseout/mouseleave
box.onmouseout = function() {
console.log('移出了')
}
box.onmouseleave = function() {
console.log('移出了')
}
鼠标移动:mousemove
box.onmousemove = function() {
console.log('移动了');
}
鼠标滚轮事件：mousewheel
box.onmousewheel = function() {
console.log('滚动了');}
浏览器事件
加载：load
window.onload.function(){
console.log('页面加载完成')
}
滚动：scroll
(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）
大小改变：resize
window.onresize = function(){}
键盘事件
键盘事件除了用window可以触发之外，还可以使用document，或者表单元素.按下:keydown
window.onkeydown = function() {
console.log(aaaa);
}
弹起：keyup
window.onkeyup = function(){
console.log(aaaa)
}
敲打：keypress
window.onkeypress = function(){
console.log(aaaa)
}
表单事件
提交表单：submit获取焦点：focus
失去焦点：blur
内容改变并失去焦点：change
input的value值改变：input
<body>
<input type="text">
<p></p>
</body>
<script>
document.querySelector('input').oninput = function() {
document.querySelector('p').innerText = this.value
}
</script>
事件流
事件流就是事件从发生到执行结束的流程,事件流包含3个阶段：捕获阶段、目标阶段、冒泡阶段.
事件捕获阶段：事件开始由顶层元素触发，然后逐级向下传播，直到目标元素，依次执行其身上绑定的事件。
事件目标阶段(处理阶段)：触发当前自身的事件。
事件冒泡阶段：事件由目标元素先接收，然后逐级向上传播，达到最顶层元素，依次执行其身上绑定的事件。 事件执行的流程是先捕获阶段——》再目标元素阶段——》最后冒泡阶段。
目标元素的事件是在目标阶段执行，其他事件会在冒泡阶段执行。每个事件只会执行一次，也就是说如果在冒泡阶段执行了事件，就不会在捕获阶段执行。
事件侦听器
使用on加事件类型来绑定事件：同一个元素只能给一个元素绑定一次<button onclick="alert(123)">按钮1</button>
<button onclick="fn()">按钮2</button>
<script>
function fn(){
alert(456)
}
事件解绑
事件一旦绑定，会一直留在内存中。大部分事件都是执行一次就不需要了，此时，占用内存的事件就造成了内存的浪费。所以事件绑定并执行结束，不需要再次执行的时候，是需要解绑的。
因为事件绑定方式有两种，一种通过标签.on类型=函数绑定，另一种是通过事件侦听器绑定，绑定方式不同，解绑的方式也是不同的。
标签.on类型=函数绑定的事件，是在给对象的on类型属性设置值为函数，未绑定前为null，所以这种绑定方式绑定的事件，可以将标签.on类型属性赋值为null即可解绑.
var btn = document.querySelector('button')
console.dir(btn)
var btn = document.querySelector('button')
btn.onclick = function() {
console.log('这是按钮的单击事件')
// 将给btn绑定的事件解绑
btn.onclick = null
}
事件对象
浏览器为事件提供了一个对象，用来记录事件的各种具体信息，例如，鼠标点击的位置、鼠标按键的信息、键盘的键码<button id="btn">按钮</button>
</body>
<script type="text/javascript">
btn.onclick=function(){
console.log(window.event);
}
获取事件类型
e.type // 事件的类型
<button id="btn">
按钮
</button>
<script>
btn.onclick=function(e){
var e = e || window.event;
console.log(e.type); // MouseClick
}
btn.onmouseover=function(e){
var e = e || window.event;
console.log(e.type); // MouseOver
}
获取鼠标按键码
e.button // 鼠标按键的信息
<body>
<button id="btn">按钮</button>
</body>
<script type="text/javascript">
btn.onmousedown = function(e){
var ev = e || window.event;
var code = ev.button;
if(code == 0){
console.log("您点击的是左键");
}else if(code == 1){
console.log("您点击的滚轮");
}else if(code == 2){
console.log("您点击的是右键");
}else{
console.log("不知道你点击的是什么");
}
}
