第13章 事件
dobeco
# 第13章 事件
# 13.1 事件流
# 13.1.1 事件冒泡
# 13.1.2 事件捕获
# 13.1.3 DOM事件流
# 13.2 事件处理程序
# 13.2.1 HTML事件处理程序
# 13.2.2 DOM0级事件处理程序
# 13.2.3 DOM2级事件处理程序
# 13.2.4 IE事件处理程序
# 13.2.5 跨浏览器的事件处理程序
# 13.3 事件对象Event
- event.bubbles 表示事件是否冒泡
- event.cancleable 表示是否可以取消事件的默认行为
- event.currentTarget 正在处理的事件元素
- event.detail 事件相关的细节信息
- event.preventDefault 取消事件的默认行为
- event.stopImmediatePropagation 取消事件进一步捕获或者冒泡
- event.stopPropagation 取消事件进一步捕获或者冒泡
- event.target 事件的目标
- event.type 被触发事件的类型
# 13.3.1 DOM中的事件对象
# 13.3.2 IE中的事件对象
# 13.3.3 跨浏览器的事件对象
# 13.4 事件类型
- UI
- load
- unload
- abort
- error
- select
- resize
- scroll
- 焦点
- blur
- focus
- focusin
- 鼠标与滚轮
- click 单击
- dbclick 双击
- mousedown 鼠标按下
- mouseenter 鼠标从元素外移动到元素范围之内
- mouseleave 鼠标移动到元素范围之外
- mousemove 鼠标指针在元素内部移动重复触发
- mouseout 鼠标移动到元素范围外触发，移动到父元素之外也会触发一次
- mouseover 进入一个元素时触发，进入子元素还会触发一次
- mouseup 鼠标按键抬起
- clientX 窗口水平位置位置
- clientY 窗口垂直位置
- screenX 鼠标相对于屏幕的水平位置
- screenY 鼠标指针相对于屏幕垂直位置
- pageX、pageY 鼠标在页面中的位置
- 坐标
- 客户端坐标 clientX/clientY
- 页面坐标 pageX/pageY
- 屏幕坐标 screenX/screenY
- 鼠标与目标元素上的位置 offsetX/offsetY
- 键盘与文本事件
- keydown
- keypress 按下除了ctrl、shift、alt有值的建，如果按住不放，会重复触发
- keyup
- 复合事件
- compositionstart
- compoistionupdate
- compositiononend
# 变动事件
- HTML5事件
- contextmenu 单价鼠标右键调出上下文菜单
- beforeunload
- DOMContentLoaded 页面所有都加载完毕时触发
- readystatechange 文档或元素的加载状态有关信息
- pageshow 页面显示时触发
- pagehide 页面
- hashchange URL参数列表发生变化时
- 设备事件
- orientationchange 横屏/竖屏
# 13.4.1 UI事件
# 13.4.2 焦点事件
# 13.4.3 鼠标与滚轮事件
# 13.4.4 键盘与文本事件
# 13.4.5 复合事件
# 13.4.6 变动事件
# 13.4.7 HTML5事件
# 13.4.8 设备事件
# 13.4.9 触摸与手势事件
- touchstart
- touchmove
- touchend 手指从屏幕上移开时触发
- touchcancel
- touches
- targetTouchs
- changeTouches
- gesturestart 当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发
- gesturechange
- gestureend
# 13.5 内存和性能
# 13.5.1 事件委托
# 13.5.2 移除事件处理程序
# 13.6 模拟事件
# 13.6.1 DOM中的事件模拟
# 13.6.2 IE中的事件模拟
# 13.7 小结
事件是将JavaScript与网页练习在一起的主要方式。“DOM3级事件”规范和HTML5定义了常见的大多数事件。即使有规范定义了基本事件，但很多浏览器仍然在规范之外事件了自己的专有事件，从而为开发人员提供更多掌握用户交互的手段。有些专有事件与特定设备关联，例如亿欧方Safari中的orientationchange事件就是特定关联iOS设备的。
在使用事件时，需要考虑如下一些内存与性能方面的问题。
- 有必要限制一个页面中事件处理程序的数量，数量太多会导致占用大量内存，而且也会让用户感觉页面反应不够灵敏。
- 建立在事件冒泡机制之上的事件委托技术，可以有效地减少事件处理程序的数量。
- 建议在浏览器卸载页面之前移除页面中的所有的事件处理程序。
可以使用JavaScript在浏览器中模拟事件。“DOM2级事件”和“DOM3事件”规范规定了模拟事件的方法，为模拟各种有定义的事件提供了方便。此外，通过组合使用一些技术，还可以在某种程度上模拟键盘事件。IE8及之前版本同样支持时间内模拟，只不过模拟的过程有些差异。
事件是javaScript中最重要的主体之一，深入理解事件的工作机制以及他们对性能的影响至关重要。