JavaScript中的事件（上）

事件的概述：

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

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

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

事件的模式

内联模式

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