概述：
事件是一个流程，就是一个监听（预备） 一个触发（当前内容执行了 （进行处理）
用户在页面上操作（监听这个操作）, 然后我们要调用函数来处理（进行处理）.
监听过程 ---- 触发过程 ---- 处理过程 这个流程就是完整的一个事件
事件的模式
内联模式
<div onclick='方法名()'></div>
脚本模式
document.queryseletor('div').onclick = function(){
//操作
} //也会被解析为内联
内联里面调用的方法的this会指向window（传递this）脚本模式的this会指向当前的调用者
事件的分类：
鼠标事件 （鼠标触发的 mouse开头都是鼠标事件）
click 单击事件
dblclick 双击事件
mousemove 鼠标移动事件
mouseover 鼠标移进 （自己及自己里面的都能触发）
mouseout 鼠标移出
mouseenter 鼠标移进 （只会是自己可以触发）
mouseleave 鼠标移出
mousedown 鼠标按下
mouseup 鼠标弹起
...
键盘事件 （键盘触发 key开头的都是键盘事件）
keyup 弹起
keydown 按下
keytpress 字符键按下
//除非是输入框 不然是不能调用键盘事件 都是window的
window.onkeydown = function(){
console.log('键盘按下');
}
window.onkeyup = function(){
console.log('键盘弹起');
}
window.onkeypress = function(){
console.log('字符键按下');
}
HTML事件 （系统事件 被动触发的）
load 加载
close 关闭
change 输入框的value值发送表示
select 只有输入框才能触发 （选择里面的内容）
focus 获取焦点
blur 失去焦点
reset 重置
submit 提交
scorll 滚动条滚动
...
// load 窗口的加载 图片的加载 等等
window.onload = function(){
console.log('窗口加载');
}
window.onunload = function(){ //清除对应的内存 销毁
console.log('窗口卸载');
}
window.onclose = function(){
console.log('窗口关闭');
}
var input = document.querySelector('input')
input.onchange = function(){ //必须要失去焦点
console.log('value值变化了');
}
input.onselect = function(){ //禁止复制粘贴
console.log('当前内容被选择');
}
input.onfocus = function(){
console.log('获取焦点');
}
input.onblur = function(){
console.log('失去焦点');
}
// form表单的事件 onsubmit 提交的时候触发 onreset 重置的时候的触发
document.querySelector('form').onsubmit = function(){
console.log('表单提交');
}
document.querySelector('form').onreset = function(){
console.log('表单重置');
}
window.onscroll = function(){ //每次滚动距离
console.log('滚动条滚动');
}
事件的组成
触发者.on+对应的事件名 = 处理的函数 对应的事件组成
触发者 一般来说是对应的元素对象
事件名 就是上述分类的事件名
处理函数 由自己定义的函数（handler）（这个函数是事件驱动执行）
event （事件源）
关于事件的组成 元素.on事件名 = 处理函数
- 处理函数 是一个function 作为一个function 他具备一个arguments（参数数组）
- 因为arguments[0] 是获取第一个参数 那么我在对应的处理函数里面写一个参数这个参数不就是对应的arguments[0]
- 我们发现对应的arguments[0] 返回的对应对象是一个event类型的对象 所以我们可以猜出来他设计了一个名event的对象 而这个对象同时又是全局的对象 所以他归属于window 所以我们可以写成 window.event 或者 省略对应的window（event）
//e是形参 相当于第一个形参 常见的写法 这个形参名字叫 e 或者 event
window.onkeydown = function(e){
console.log(e); //这个就是arguments[0] event类型对象
//他设计一个event对象 他是一个全局的变量 window.event
//ie为了兼容 我们会写出
e = e || window.event //兼容写法
console.log(e.altKey);
console.log(e.key);
}
属性
事件流
概述：事件流指代的是事件的执行流程，多个盒子嵌套相同事件，这个时候你触发一个盒子的事件，并不会只执行一个盒子的事件的处理函数，而是全部执行。
事件流的俩种模式
冒泡模式（浏览器采用的）
冒泡模式指代的是事件从里到外逐个执行
阻止事件冒泡
e.stopPropagation() 函数 （*）（stop）
e.cancelBubble = true 属性设置（现在虽然都可以用 但是未来可能会废弃）
兼容写法
e.stopPropagation?e.stopPropagation():e.cancelBubble = true
捕获模式
捕获模式指代的是事件从外到里逐个执行
默认行为
就是一个元素会自带的行为称为默认行为 a标签的默认行为会跳转 form标签里面submit按钮默认会提交（刷新页面）鼠标右键会出现一个菜单栏 等等一系列的问题
有些时候我们不需要这些行为的产生 那么我们就需要阻止默认行为
阻止默认行为的js实现
e.preventDefault() 函数 （*） （prevent）
e.returnValue = false ie的兼容
return false 直接结束对应的操作
e.preventDefault?e.preventDefault():e.returnValue = false //兼容
拖拽
思路
- 给拖拽的元素添加mousedown的事件 记录当前点击的位置
- 给对应的容器添加mousemove事件 记录每次移动的位置
- 给对应的容器添加mouseup 事件 清除上述mousemove事件
代码实现
//获取div
var box = document.getElementById('box')
//给div添加mousedown事件
box.onmousedown = function(e){
e = e || event
//记录的是鼠标在div里面的位置
//在mousedown里面记录按下的位置
var x = e.offsetX
var y = e.offsetY
// var x = e.pageX-box.offsetLeft
// var y = e.pageY-box.offsetTop
//给document添加mousemove事件
document.onmousemove = function(e){
e = e || event
//记录每次的位置 在document里面的位置
var currentX = e.pageX
var currentY = e.pageY
//并且设置div的位置
box.style.left = currentX - x + "px"
box.style.top = currentY - y + "px"
}
//给document添加mouseup事件
document.onmouseup = function(){
//清除对应的mousemove事件
document.onmousemove = null
}
}
样式获取
style属性 只能获取标签内容style属性里面存在的一些样式
如果你需要获取对应的全局所有地方设置样式 我们就需要采用一些方法
getComputedStyle 方法属于window的方法
window.getComputedStyle(元素对象,null) //返回给你的是一个样式对象
ie兼容
element.currentStyle //返回给你一个样式对象
兼容封装
//方法的封装
function getStyle(element,attr){
var style = window.getComputedStyle?window.getComputedStyle(element):element.currentStyle
return style[attr]
}
//调用
console.log(getStyle(box,'height'));
