事件（上）

概述：

事件是一个流程，就是一个监听（预备） 一个触发（当前内容执行了 （进行处理）

用户在页面上操作（监听这个操作）, 然后我们要调用函数来处理（进行处理）.

监听过程 ---- 触发过程 ---- 处理过程 这个流程就是完整的一个事件

事件的模式

内联模式

<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）（这个函数是事件驱动执行）