事件
事件三要素：事件源+事件类型+事件处理程序
事件集合
鼠标事件
| 事件 | 描述 |
|---|---|
| onclick | 点击 |
| ondblclick | 双击 |
| onmousedown | 按下 |
| onmouseup | 抬起 |
| onmousemove | 移动 |
| onmouseover | 移入 |
| onmouseout | 移出 |
| onmouseenter | 鼠标指针移动到元素上时触发(不支持冒泡) |
| onmouseleave | 鼠标指针移出元素上时触发(不支持冒泡) |
| oncontextmenu | 右键 |
键盘事件
| 事件 | 描述 |
|---|---|
| onkeydown | 按下 |
| onkeyup | 抬起 |
| onkeypress | 按下(只能触发数字字母符号) |
表单事件
| 事件 | 描述 |
|---|---|
| onfocus | 获得焦点 |
| onblur | 失去焦点 |
| onchange | 失去焦点并内容改变 |
| onsubmit | 提交事件（form标签事件） |
| onreset | 重置事件（form标签事件） |
| oninput | 表单输入 |
其他事件
| 事件 | 描述 |
|---|---|
| onscroll | 滚动条事件(滚动条位置改变) |
| onwheel | 鼠标滚轮事件 |
| onresize | 页面尺寸改变 |
| onload | 页面加载完成之后执行该事件 |
| DOMContentLoaded | 页面结构加载完成执行该事件 |
事件绑定方式
-
通过标签
<button onclick="click_fn()">click</button> <script> function click_fn(){ console.log(this); } </script> -
通过dom对象绑定
box是dom对象 box.onclick=function(){}
事件监听
需要为同一个元素添加多个事件处理程序
添加事件监听：
dom对象.addEventListener("事件不加on",事件处理程序,boolean)
box.addEvenListener("click",function(){
},false)
移除事件监听
dom对象.removeEventListener("事件不加on",事件处理程序,boolean)
box.addEvenListener("click",function(){
},false)
// 必须移除addEventListener添加事件
box.removeEvenListener("click",function(){
},false)
ie8及以下兼容性：
添加事件监听：dom对象.attachEvent("事件"，事件处理程序)
移除事件监听：dom对象.detachEvent("事件"，事件处理程序)
事件对象
事件对象在创建中自动创建了事件对象
事件对象存储的是所有有关事件的信息
事件的对象作为事件处理程序的第一个参数
事件对象存在兼容性： e=e|| event
属性：
| 属性 | 描述 |
|---|---|
| e.clientX | 当鼠标事件发生的时候，鼠标相对于浏览器X轴的位置 |
| e.clientY | 当鼠标事件发生的时候，鼠标相对于浏览器Y轴的位置 |
| e.offsetX | 当鼠标事件发生的时候，鼠标相对于事件源X轴的位置 |
| e.offsetY | 当鼠标事件发生的时候，鼠标相对于事件源Y轴的位置 |
| e.pageX | 当鼠标事件发生的时候，鼠标相对于浏览器X轴的位置，包含页面横向滚动距离 |
| e.pageY | 当鼠标事件发生的时候，鼠标相对于浏览器X轴的位置，包含页面纵向滚动距离 |
| e.wheelDelta | 滚动量 |
| e.key | 获取当前所按键的名称 |
| e.ctrlKey | 判断当前ctrl键是否按下的状态 |
| e.shiftKey | 判断当前shift键是否按下的状态 |
| e.altKey | 判断当前alt键是否按下的状态 |
| e.keyCode | 获取当前所按键的键盘码 |
方法：
| 属性 | 含义 |
|---|---|
| e.preventDefault() | 阻止浏览器默认行为 |
| e.stopPropagation() | 阻止事件流的传播(阻止冒泡) |
| e.currentTarget | 指向被绑定事件的元素 |
| e.target | 指向事件触发的对象，当事件是处在冒泡或者捕获阶段调用的时候，指向最先触发事件的事件源 |
| e.type | 返回当前所触发事件的事件名称 |
