事件（上）
事件的概念
事件是一个流程，就是一个监听（预备） 一个触发（当前内容执行了 （进行处理）
用户在页面上操作（监听这个操作）, 然后我们要调用函数来处理（进行处理）.
监听过程 ---- 触发过程 ---- 处理过程 这个流程就是完整的一个事件
事件触发：
用户在页面上操作(如点击按钮, 鼠标滑过, 鼠标点击, 鼠标松开, 文本框获得焦点, 失去焦点等), 就是事件触发
事件的模式
内联模式 (直接在HTML标签中添加事件 JS与HTML没有分离 后期代码维护和扩展很不利)
注意: 内联模式调用的函数不能放到window.onload里面, 否则会找不到该函数.
<input type="button" value="按钮" onclick="alert('hello');" />
脚本模式 (先获取到元素节点对象, 再针对该节点对象添加事件)
通过匿名函数，可以直接触发对应的代码
document.queryseletor('div').onclick = function(){
//操作
} //也会被解析为内联
通过指定的函数名赋值的方式 来执行函数
box.onclick = func; //注意这里不能写成func()
function func() { //给box节点对象添加点击事件onclick
console.log('Hello world!');
};
内联里面调用的方法的this会指向window（传递this）脚本模式的this会指向当前的调用者
事件处理由三个部分组成：
1. 触发事件的元素节点对象
2. 事件处理函数
3. 事件执行函数
事件的分类 (鼠标事件, 键盘事件和 HTML事件)
鼠标事件 （鼠标触发的 mouse开头都是鼠标事件）
click 单击事件
dblclick 双击事件
mousemove 鼠标移动事件
mouseover 鼠标移进 （自己及自己里面的都能触发）
mouseout 鼠标移出
mouseenter 鼠标移进 （只会是自己可以触发）
mouseleave 鼠标移出
mousedown 鼠标按下
mouseup 鼠标弹起
键盘事件 （键盘触发 key开头的都是键盘事件 一般由window对象或者document对象调用）
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）（这个函数是事件驱动执行）
