事件绑定
事件绑定的三要素
1.事件源：和谁做好约定
2.事件类型：约定一个什么行为
3.事件处理函数：当用户触发该行为的时候，执行什么代码
语法：
事件源.on事件类型 = 事件处理函数
例：
事件类型
事件对象
概念：当事件触发的时候，一个描述该事件信息的对象数据类型
例：当事件被触发时，浏览器会自动传递出本次的事件对象
事件对象内的信息 - 鼠标事件
坐标信息：
1.offsetX 和 offsetY
2.clientX 和 clientY
3.pageX 和 pageY
例：鼠标点击时获得当前鼠标的坐标
事件参数event总结
| event | 事件信息对象，包含了事件目标和坐标信息 |
| event.type | 事件类型 |
| event.target | 事件触发目标，谁触发了事件（不确定是谁） |
| event.currentTarget | 事件目标本身，谁绑定了事件（总是指向事件目标） |
| this | this指向事件目标 == event.currentTarget |
参数e的坐标问题
| event.screenX, event.screenY | 鼠标相对于电脑屏幕左上角的坐标 |
| event.pageX, event.pageY | 鼠标相对于网页左上角的坐标 |
| event.clientX, event.clientY | 鼠标相对于显示窗口左上角的坐标 |
| event.layerX, event.layerY | 鼠标相对于非静态定位的父级元素左上角的坐标,类似于绝对定位 |
| event.offsetX, event.offsetY | 鼠标相对于event.target出发事件的目标左上角的坐标 |
事件对象内的信息 - 键盘事件
键盘编码 事件对象.keyCode
事件对象.key
例：获得当前键盘按下的值
keyCode对应的ASCLL编码值
事件传播
概念：浏览器响应事件的机制
浏览器窗口最先知道事件的发生
==捕获阶段：==从window按照结构子级的顺序传递 目标
==目标阶段：==准确触发事件的元素接收到行为
==冒泡阶段：==从 目标 按照结构父级的顺序传递到window
本次事件传播结束
例：
阻止事件传播
因为事件传播当在子级身上触发事件的时候，也同时会触发父级的事件，因此我们要阻止事件传播
语法：事件对象.stopPropagation()
事件委托
概念：利用事件冒泡机制，把自己的事件委托给结构父级中的某一层
例：
事件对象内的信息 -表单事件
阻止默认事件
在js中有很多元素都有默认行为 比如 a标签跳转 提交按钮 重置按钮 等 如果不需要元素的默认行为 可以被阻止，利用事件参数 来进行阻止
拖拽事件
被拖拽元素
ondragstart 开始拖拽运行一次
语法：元素.οndragstart=function( ){ }
ondrag 拖拽时连续执行多次
语法：元素.οndrag=function( ){ }
ondragend 拖拽结束执行一次
语法：元素.οndragend=function( ){ }
被拖入的元素
ondragenter 拖入事件 文件被拖入此元素范围时执行一次
语法：元素.ondragenter = function( ){ }
ondragover 拖拽悬停 当一个能拖拽的标签在事件目标内部拖拽时连续触发
语法：元素.ondragover =function( ){ }
ondragleave拖拽悬停 把一个能拖拽的标签拖出事件目标内部时触发
语法：元素.ondragleave = function( ){ }
ondrop 丢下事件 把一个能拖拽的标签拖入事件目标内部并松开鼠标(结束拖拽)时,触发
语法：元素.ondrop = function( ){ }
ondrop事件有时可能触发不了,需要阻止事件的默认行为：
1, 阻止ondragover事件的默认行为 2, 阻止ondrop本身的默认行为
阻止元素默认行为，function参数event.preventDefault();