事件

概述：事件是一个异步机制，相当于【执行者】执行【观察者】观察、处理函数执行的流程

事件的组成

事件名（内置）

执行对象（元素对象）

处理函数（自定义函数）

观察者（js的事件引擎）

事件名    click（内置）

执行对象    button（元素对象）

处理函数    后续的function（自定义函数）

观察者    （js引擎 事件引擎）

在js内书写的事件，他的观察者都是事件引擎。需注意（事件名、执行对象、处理函数 ）

事件声明书写方式

内联（在标签内部）

脚本（在script中）

内联模式和脚本模式的区别

内联模式里面的函数需要手动调用 而对应的脚本的模式的处理函数自动调用

内联模式里面的函数调用的this指向window 对应的脚本模式里面的处理函数的this指向当前的调用者

事件名分类

鼠标事件（鼠标触发的mouse）

click 单击事件

dblclick 双击事件

mousedown 按下

mouseup 弹起

mouseenter 移入

mouseleave 移出

mouseover 移入

mouseout 移出

mousemove 移动

contextmenu 右键点击

注意：

click和对应mousedown和mouseup的执行顺序 （mousedown -- mouseup -- click）

mouseenter(mouseleave)和mouseover(mouseout)的区别 （mouseenter 子元素不会触发mouseover子元素会触发）

键盘事件（键盘触发的key）

keydown 按下

keyup 弹起

keypress 字符串（除功能键的其他键）

注意：

执行顺序 keydown - keypress - keyup

keypress 一定会触发 keydown

HTML事件（HTML自带事件，只用于HTML）

window事件

加载事件（load）

卸载事件 （unload）

关闭窗口的事件 （onclose）

打印之前调用的事件 (onbeforeprint)

卸载之前调用的事件 （onbeforeunload）

滚动栏发生变化的事件 （onscroll）

表单事件

submit 表单提交事件

reset 表单重置事件

select 内容被选中（只针对于输入框和文本域）

change 表单的value值发生变化

input 可输入的表单标签里面进行输入

blur 失去焦点

focus 获取焦点

聚焦与失焦

focus 聚焦的方法

blur 失焦的方法

event事件源对象

概述：event 被称为事件源对象，他是一个全局的内置对象（属于window），他里面包含了一些关于事件执行的相关的属性。

处理函数中的Arguments

处理函数也是一个函数，函数就具备一个arguments的属性。argments是一个伪数组。那么就可以知道对应的处理函数里面也拥有arguments

从上述代码可得到对应的事件执行的处理函数里面会传递一个参数 ，这个参数的类型是一个event。这个处理函数的arguments数组里面只有一个元素。

故而我们可以简写为

event的常用属性

鼠标坐标相关属性

screenX 表示鼠标离屏幕的X距离

screenY 表示鼠标离屏幕的Y距离

pageX 表示当前的鼠标离页面的X距离（包含卷起部分）

pageY 表示当前的鼠标离页面的Y距离（包含卷起部分）

clientX 表示鼠标离页面可视区的X距离

clientY 表示鼠标离页面可视区的Y距离

offsetX 表示鼠标离父元素偏移的X距离

offsetY 表示鼠标离父元素偏移的Y距离

按钮辅助相关属性

ctrlKey 是否按下了ctrl键

altKey 是否按下了alt键

shiftKey 是否按下shift键

鼠标相关属性

button 按下（左键0 中间滚轮1 右键2）

事件及相关触发属性

type 当前的事件类型

target 表示当前事件的触发对象

currentTarget 表示加事件的元素

键盘属性

key 表示当前按下的键的字符（区分大小写）

keyCode （在keydown里面 不区分大小 全部是大写的ascii码）

code （key+大写的字符）

charCode （在keypress里面才管用 他区分大小写 返回对应的ascii码）

事件委托机制（事件代理）

将对应的事件委托给对应的父元素，然后通过对应的e.target获取实际的触发元素进行操作。

运用场景

在一个父元素里面有多个子元素要添加相同的事件的时候