声明：本人的所有博客皆为个人笔记，作为个人知识索引使用，因此在叙述上存在逻辑不通顺、跨度大等问题，希望理解。分享出来仅供大家学习翻阅，若有错误希望指出，感谢！
检测事件支持版本
//检测浏览器是否支持DOM2级HTML事件，支持则返回true
var isSupported = document.implementation.hasFeature("HTMLEvent","2.0");
//检测浏览器是否支持DOM3级事件，支持则返回true
var isSupported = document.implementation.hasFeature("UIEvent","3.0");
UI事件
UI事件指那些不一定与用户操作有关的事件
| 事件 | 说明 |
|---|---|
| DOMActivate | 表示元素已被用户操作（鼠标或键盘）激活，不建议使用 |
| load | 当页面完全加载后在window上触发，当图像加载完毕后在<img>元素上触发，当嵌入的内容加载完毕后在<object>元素上面触发 |
| unload | 当页面完全卸载后在window上触发，当嵌入的内容卸载完毕后在<object>元素上面触发 |
| abort | 当用户停止下载时，若嵌入的内容没有加载完，则在<object>元素上面触发 |
| error | 当发生JavaScript错误时在window上触发，当无法加载图像时在<img>元素上触发，当无法加载嵌入的内容时在<object>元素上面触发 |
| select | 当用户选择文本框（<input>或<textarea>）中的字符时触发 |
| resize | 当窗口的大小发生变化时在window上触发 |
| scroll | 当用户滚动带滚动条的元素时，在该元素上触发（body元素包含所加载页面的滚动条） |
- 除DOMActivate属于DOM3之外，其他UI事件都属于DOM2
一般来说，在window上发生的任何事件都可以在<body>元素中通过相应的特性来指定，例如<body οnlοad="……">
焦点事件
| 事件 | 说明 |
|---|---|
| blur | 在元素失去焦点时触发，不会冒泡，所有浏览器都支持 |
| focus | 在元素获得焦点时触发，不会冒泡，所有浏览器都支持 |
| focusin | 在元素获得焦点时触发，会冒泡，多数浏览器支持 |
| focusout | 在元素失去焦点时触发，会冒泡，多数浏览器支持 |
当焦点从页面中的一个元素移动到另一个元素时，会依次触发以下事件：
- focusout在失去焦点的元素上触发
- focusin在获得焦点的元素上触发
- blur在失去焦点的元素上触发
- DOMFocusOut在失去焦点的元素上触发
- focus在获得焦点的元素上触发
- DOMFocusIn在获得焦点的元素上触发
鼠标事件
| 事件 | 说明 |
|---|---|
| click | 点击鼠标或按下回车时触发（一般是鼠标左键） |
| dblclick | 双击鼠标时触发（一般是鼠标左键） |
| mousedown | 按下任意鼠标按钮时触发 |
| mouseup | 当用户释放鼠标按钮时触发 |
| mouseleave | 在鼠标光标从元素上移到元素外部时触发，该事件不冒泡，在光标移到后代元素上时不触发 |
| mouseenter | 在鼠标光标首次从元素外部移入元素范围内时触发，该事件不冒泡，在光标移到后代元素上时不触发 |
| mouseout | 当鼠标光标位于一个元素上方，又移入另一个元素时触发，另一个元素可能位于前一个元素外部，也可能是前一个元素的子元素 |
| mouseover | 在鼠标光标首次从元素外部移入元素或其子元素范围内时触发 |
| mousemove | 当鼠标光标在元素内部移动时重复触发 |
- dblclick、mouseenter、mouseleave为DOM3事件，其他为DOM2事件
移入移出事件
在原生JS中鼠标移入移出事件有四个，分别为mouseover ,mouseout ,mouseenter,mouseleave，其中mouseover和mouseenter为移入事件，mouseou和mouseleave为移出事件
- mouseover: 只要鼠标指针移入事件所绑定的元素或其子元素，都会触发该事件
- mouseenter: 只有鼠标指针移入事件所绑定的元素时，才会触发该事件
- 如果一个元素没有子元素，那么该元素绑定mouseover或者mouseenter两种事件效果没有区别，鼠标每次移入元素时都只会触发一次事件；如果绑定了mouseover事件的元素存在子元素，那么，每次移入该元素时都会触发一次事件（包括从外部移入和从子元素移入），移入子元素时也会触发一次事件
鼠标点击事件
mousedown、mouseup、click、dblclick四个事件的触发顺序如下：
- mousedown
- mouseup
- click
- mousedown
- mouseup
- click
- dblclick
鼠标位置
视口坐标位置
- 使用 event.clientX 和 event.clientY 属性访问
页面坐标位置
- 使用 event.pageX 和 event.pageY 属性访问
- 在页面没有滚动的情况下，pageX和pageY的值与clientX和clientY的值相等
屏幕坐标位置
- 使用 event.screenX 和 event.screenY 属性访问
修改键
修改键包括4个键：Shift、Ctrl、Alt、Meta（windows是Win，苹果是Cmd）
DOM为此规定了4个属性，表示这些修改键的状态：event.shiftKey、event.ctrlKey、event.altKey、event.metaKey
这些属性都是布尔值，如果相应按键被按下，则为true，否则为false
相关元素
DOM通过event对象的relatedTarget属性提供了相关元素的信息，这个属性只对于mouseover和mouseout事件才包含值
- 对于mouseover事件，事件的主目标是获得光标的元素，而相关元素则为失去光标的那个元素
- 对于mouseout事件，事件的主目标是失去光标的元素，而相关元素则为获得光标的那个元素
- 对于其他事件，这个属性是null
鼠标按钮
对于mousedown和mouseup事件来说，其event对象存在一个button属性，表示按下或释放的按钮
DOM的button属性包含3个值：
- 0：主鼠标按钮（鼠标左键）
- 1：中间鼠标按钮（鼠标滚轮键）
- 2：次鼠标按钮（鼠标右键）
更多事件信息
DOM2在event对象中提供了detail属性，用于给出有关事件的更多信息
对于鼠标事件，detail属性包含一个数值，表示在给定位置上发生了多少次单击，detail属性从1开始计数，如果鼠标在mousedown和mouseup之间移动了位置，则detail属性会被重置为0
滚轮事件
当用户通过鼠标滚轮与页面交互（滚动）时，就会触发mousewheel事件，这个事件可以在任何事件上触发，最终冒泡到window上
与mousewheel事件对应的event对象除了包含鼠标事件对象的所有属性外，还包含一个特殊的mouseDelta属性，当用户向前滚动鼠标滚轮时，mouseDelta是120的倍数，当用户向后滚动鼠标滚轮时，mouseDelta是-120的倍数
键盘与文本事件
- 由3个键盘事件：
- keydown：用户按下键盘上任意键时触发，按住不放会重复触发该事件
- keypress：用户按下键盘上字符键时触发，按住不放会重复触发该事件
- keyup：当用户释放键盘上的键时触发
- 文本事件只有一个：
- textInput：在文本插入文本框之前会触发textInput事件
- 当用户按下键盘上的字符键时：先触发keydown，然后是keypress，最后是keyup
- 当用户按下键盘上的非字符键时：先触发keydown，然后是keyup
- 键盘事件也支持相同的修改键：event.shiftKey、event.ctrlKey、event.altKey、event.metaKey
- textInput与keypress的区别：
- textInput只有在可编辑区域才能被触发
- textInput事件只会在用户按下能够输入实际字符的键时才会被触发，keypress事件在按下能够影响文本显示的键时也会触发
键码
在发生keydown和keyup事件时，event对象的keyCode属性会包含一个代码，与键盘上一个按键对应
- 对于数字字母字符键，keyCode的值就是ASCII码中对应小写字母或数字的编码相同
- 非字符键码详见《JavaScript高级程序设计 第三版》p380
字符编码
-
发生keypress事件意味着按下的按键会影响屏幕中文本的显示
-
按下能够插入或删除文本的按键都会触发keypress事件
-
除opera浏览器外的其他浏览器的event对象都支持一个charCode属性，这个属性只有发生keypress事件时才包含值，值是按下的那个键所代表字符的ASCII码
-
取得字符编码后，就能通过String.fromCharCode()方法将其转为字符串
638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
