一文读懂 JavaScript 事件
一、了解JavaScript的三种事件类型
1. 鼠标事件
常见的鼠标事件
| 事件 | 发生时间 | 触发次数 |
|---|---|---|
| onclick | 用户单机对象时 | 1次 |
| ondbclick | 用户双击对象时 | 1次 |
| onmouseover | 鼠标移到某个对象时 | 1次 |
| onmouseout | 鼠标移出某个对象时 | 1次 |
| onmousemove | 鼠标被移动 | n次 |
| onmousedown | 鼠标按键被按下 | 1次 |
| onmouseup | 鼠标按键被松开 | 1次 |
2. 键盘事件
常见的键盘事件
| 事件 | 发生时间 | 触发次数 |
|---|---|---|
| onkeydown | 键盘按下去触发 | 1次 |
| onkeypress | 键盘按下并松开的瞬间触发 | n次 |
| onkeyup | 键盘抬起时触发 | 1次 |
a. 常按时触发的事件
当长按一个按键时，会不断触发onkeydown和onkeypress，只有按键抬起以后才会触发onkeyup事件。
b. onkeydown/onkeyup和onkeypress的区别
1）onkeypress只能捕获字母、数字、符号键，不能捕获功能键（如Enter键、F1～F12键等）；onkeydown/onkeyup基本可以捕获所有功能键（特殊键盘的某些按键除外）。
2）捕获字母键时，onkeypress可以区分大小写，onkeydown和onkeyup不区分大小写。
3）捕获数组键时，onkeydown/onkeyup可以区分主键盘和小键盘，onkeypress不能够区分。
c. 通常将键盘事件声明在document上
在使用键盘事件时，通常会直接将键盘事件监测到document上，而且onkeydown和onkeyup通常监测一个即可
d. 判断键盘按键
在使用键盘事件时，除了需要检测触发的是onkeydown还是onkeyup，更重要的是判断用户按下去的是哪一个按键。
当监测键盘事件时，浏览器会默认将事件因子e传入事件触发函数中，事件因子可以通过keyCode等属性确认按键ASCⅡ码值，进而确定用户按下的是哪一个按键。
兼容方式取到按键ASCⅡ编码
var code=evn.keyCode‖evn.whi‖evn.charCode；
常用的ASCⅡ码值参照表
| ASCⅡ码值 | 按键或含义 |
|---|---|
| 0 | 空字符（Null） |
| 13 | Enter 键 |
| 27 | Esc 键 |
| 32 | 空格键 |
| 48-57 | 数字键0-9 |
| 65-90 | 大写字母A-Z |
| 97-122 | 小写字母a-z |
| 127 | Delete 键 |
3. HTML事件
常见的HTML事件
| 事件 | 发生时间 |
|---|---|
| onload | 文档或图像加载后 |
| onunload | 文档卸载后，或者退出页面时 |
| onblur | 元素失去焦点 |
| onselect | 文本被选中 |
| oninput | 元素获得焦点时 |
| onchange | 内容被改变 |
| onfocus | 元素获得焦点时 |
| onsubmit | 表单提交时 |
| onreset | 重置按钮被单击 |
| onresize | 窗口重新调整大小时 |
| onscroll | 当文档被滚动时发生的事件 |
| ondrag | 当元素正在拖动时触发的事件 |
| ondragstart | 当元素开始被拖动的时候触发的事件 |
| ondragover | 元素被拖动到指定区域的时候触发的事件 |
| ondrop | 当放置被拖动元素时触发的事件 |
4. event事件因子
取到事件因子有两种方式，除了键盘事件，还可以在任何事件的触发函数中使用window.event取到事件因子对象。
element.onclick = function(e){
var evn = e || window.event;
}
event对象属性
| 属性名 | 说明 |
|---|---|
| keyCode | 检查键盘事件相对应的Unicode 字符码 |
| srcElement | 返回触发事件的元素 |
| target | 返回触发事件的元素(对象) |
| type | 返回当前 event 对象表示的事件名称 |
| button | 检查按下的鼠标键 |
| x,y | 返回鼠标相对于 css 属性中有 position 属性的上级元素的 x 和 y 坐标 |
| clientX,clientY | 返回鼠标在浏览器窗口区域的 x 和 y 坐标 |
| screenX,screenY | 返回鼠标相对于用户屏幕中的 x 和 y 坐标 |
| altKey | 检查 Alt 键的状态。当 Alt 键按下时，值为 True；否则为 False |
| ctrlKey | 检查 Ctr 键的状态。当 Ctr 键按下时，值为 True；否则为 False |
| shiftKey | 检查 Shift 键的状态。当 Shift 键按下时，值为 True；否则为 False |
| toElement | 检测 onmouseover 和 onmouseout 事件发生时，鼠标所进入的元素 |
| fromElement | 检测 onmouseover 和 onmouseout 事件发生时，鼠标所离开的元素 |
注意：检测鼠标按键的button属性仅用于onmousedown、onmouseup和onmousemove事件。对于其他事件，不管鼠标状态如何，都返回0（比如onclick）。它有8个属性值，分别是0没按键、1按左键、2按右键、3按左右键、4按中间键、5按左键和中间键、6按右键和中间键、7按所有的键。
e.target和this的区别
| 属性 | 返回值 |
|---|---|
| e.target | 返回的是触发事件的对象（元素） |
| this | 返回的是绑定/调用事件的对象（元素） |
二、掌握JavaScript的两种事件模型
1. DOM0 事件模型
DOM0 模型有两种绑定事件的方式，分别是内联模型和脚本模型。
a. 内联模型
内联模型又称为“行内绑定”，其绑定事件的方式是直接将函数名作为 HTML 标签某个事件的属性值。
基本语法如下：＜button onclick="func（ ）"＞按钮＜/button＞
缺点：违反 W3C 关于 HTML 与 JavaScript 分离的基本原则。
b. 脚本模型
脚本模型又称为“动态绑定”，其绑定的方式是通过在 JavaScript 中选中一个节点，并给节点的 onlick事件添加监听函数。
基本语法如下：window.onload = function(){} || document.getElementById("div").onclick = function(){}
- 优点：实现了 HTML 与 JavaScript 分离，符合 W3C 的基本原则。
- 缺点：
-
- 1）同一节点只能绑定一个同类型事件，如果绑定多次，则只有最后一次生效
-
- 2）一旦绑定事件，无法取消事件绑定。
2. DOM2 事件模型
DOM0绑定事件的两种方式都有其局限性。为了解决DOM0事件模型所存在的局限性，DOM2事件模型应运而生。
添加事件绑定
DOM2 事件模型的绑定相对于 DOM0 要稍微复杂一些，并且针对浏览器版本的不同，有两种不同的绑定方式。
1）针对IE8之前的浏览器，使用attachEvent()进行事件绑定。
基本语法如下：
var btn = document.getElementById("btn");
btn.attachEvent("onclick",function(){
// onclick 触发时执行的回调函数
})；
其中，attachEvent()接收两个参数。
① 第一个参数是触发的事件类型，主要事件名称需要用“on”开头。
② 第二个参数是触发事件时执行的回调函数。
2）除 IE8 之外的其他浏览器，统一使用 W3C 规范，使用addEventListener()进行事件绑定。
基本语法如下：
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
// click 触发时执行的回调函数
}, true/false)；
其中，addEventListener()接收3个参数。
① 第一个参数是触发的事件类型，主要事件名称不需要用“on”开头。
② 第二个参数是触发事件时执行的回调函数。
③ 第三个参数是模型参数，表示事件冒泡或事件捕获，false（默认）表示事件冒泡，true表示事件捕获。
取消事件绑定
DOM2 和 DOM0 相比有一个非常重要的区别，就是使用 DOM2 绑定的事件可以取消事件绑定。如果要取消事件绑定，那么在绑定事件时，回调函数必须使用有名函数，而不能使用匿名函数。
基本语法如下：
var btn = document.getElementById("btn");
btn.attachEvent("onclick",clickFunction(){
})；
btn.addEventListener("click",clickFunction(){
}, true/false)；
function clickFunction(){
// 单击事件的回调函数
}
为什么绑定的时候不能使用匿名函数作为回调函数呢？主要原因在于取消事件绑定的时候，语法要求必须传入需要取消的函数名。而匿名函数没有函数名，故无法取消。针对不同浏览器，取消事件绑定也有两种不同方式。
1）针对IE8之前使用attachEvent()绑定的事件，可以使用detachEvent()取消事件绑定。
基本语法如下：btn.detachEvent（"onclick"，函数名）；
2）针对其他浏览器使用addEventListener()绑定的事件，可以使用removeEventListener()取消事件绑定。
基本语法如下：.removeEventListener（"click"，函数名）；
三、掌握JavaScript的事件流模型
1. 事件冒泡
当某 DOM 元素触发某事件时，会从当前 DOM 元素开始，逐个触发其祖先元素的同类型事件，直到 DOM 根节点。
2. 事件捕获
当某 DOM 元素触发某事件时，会从根节点开始，逐个触发其祖先元素的同类型事件，直到当前节点。
3. 事件委派
事件委派也叫事件委托，是将本该添加在节点自身的事件，选择添加到其父节点上，同时委派给当前元素来执行。
a. 事件委派的原理
事件委派的原理就是事件冒泡。由于给多个子元素添加事件，会沿着事件冒泡流触发其父元素的同类型事件，所以可以直接将事件添加在父元素上，并在事件函数中判断单击的是哪一个子元素，进而进行具体操作。
b. 事件委派的作用
事件委派有很大用处，主要体现在如下两点：
（1）提高性能将事件绑定在父节点上，只需要绑定一个事件就可以；而将事件依次添加给子节点，则需要绑定多个事件。因此，事件委派具有更优的性能。
（2）新添加的元素会具有同类型元素的事件如果使用其他方式绑定事件，当页面新增同类的节点时，这些节点不会获得之前绑定的事件。但是，使用事件委派可以让新添加的元素获得之前绑定的事件。
4. 阻止冒泡事件
事件委派的原理就是事件冒泡，但并不是所有的事件冒泡都是对开发有利的，实际开发中，大多情况并不想让子元素的事件影响到父元素。
- 对于 IE8 以前的浏览器，可以将
e.cancelBubble属性设为true； - 对于其他浏览器，则可以调用
e.stopPropagation()方法。
5. 阻止默认事件
除了事件冒泡，还有一种情况存在妨碍开发的问题，那就是某些标签的默认事件。比如，a 标签自带跳转页面功能，submit 标签自带提交表单功能，reset 标签自带清除表单功能……这些功能在需要的情况下，都是人们的得力助手。但是，不需要的时候，它们就会影响功能的实现效果。这时候就需要选择取消 HTML 标签的默认事件。
取消默认事件也有两种常用方式。
- 对于 IE8 之前的浏览器，可以将
e.returnValue属性设为false； - 对于 IE8 以外的浏览器，可以调用
e.preventDefault()方法。