js高程笔记13章

第13章 事件

1.事件流：描述从页面中接收事件的顺序。

　　三个阶段：捕获，处于目标，冒泡。

2.事件处理程序：局部变量event表示事件对象，this值为事件目标元素。

　　(1)HTML事件处理程序：能够访问特性。弊端：可能调用事件处理程序时，函数还未定义。同时代码紧密耦合，修改不便。

　　(2)DOM0级事件处理程序：this引用当前元素。弊端：一个元素只能添加一个事件处理程序。

　　(3)DOM2级事件处理程序：addEventListener()和removeEventListener()。没法移除匿名函数。IE9.0+支持该方法。

3.事件对象：在事件处理程序中传入的event

　　this始终等于currentTarget，表示事件的注册元素。target等于实际触发的目标

　　阻止事件默认行为：event.preventDefault()，前提：event.cancelable属性为true。

　　中止冒泡：event.stopPropagation()

　　肯定事件流阶段：event.eventPhase

4.事件类型：

　　UI事件：load，当页面彻底加载（全部图像、js、css）后触发。<img><script>标签也能够触发。

　　　　　　unload，当文档被彻底卸载后触发。用来清除引用，避免内存泄漏。

　　　　　　resize，浏览器窗口被调整宽高度时触发

　　　　　　scroll，在文档滚动期间重复被触发。

　　焦点事件：focus和blur（不冒泡），focusin和focusout（冒泡）

　　鼠标事件：click（只有它能够经过键盘触发），dbclick，mousedown，mouseup，mouseover，mousemove，mouseout

　　　　event坐标位置属性：clientX和clientY，pageX和pageY，screenX和screenY

　　　　event修改件属性：shiftKey，ctrlKey，altKey，metaKey，相应键按下返回true

　　　　event相关元素属性：relatedTarget，对于mouseover，mouseout事件指定相关元素。

　　　　event鼠标按钮属性：button

　　　　event更多事件属性：detail，P375

　　滚轮事件：mousewheel

　　无障碍性问题：不要经过onmousedown代替onclick，由于屏幕阅读器没法触发onmousedown

　　　　　　　　　不要使用onmouseover向用户展现新选项

　　　　　　　　　不要使用dbclick执行重要操做。

　　键盘与文本事件：keydown，keypress，keyup，textInput

　　　　event键码属性：keyCode，charCode

　　复合事件：

　　变更事件：删除节点，插入节点

　　HTML5事件：contextmenu事件，右键单击出现上下文菜单时触发。

　　　　　　　　 beforeunload事件，页面卸载前触发。

　　　　　　　　 DOMContentLoaded事件，跟load对比，造成DOM树后就触发，无论图像,js,css

　　　　　　　　 readystatechange事件，提供文档或元素加载状态信息

　　　　　　　　 pageshow和pagehide事件

　　　　　　　　 haschange事件

5.内存和性能：利用好事件处理程序，避免事件处理程序过多。

　　事件委托：利用事件冒泡，只指定一个事件处理程序，管理一类型的全部事件。利用event.target进行区分。

　　移除事件处理程序：在不须要时移除事件处理程序，（1）在绑定事件的标签被替换或者删除前，（2）在页面卸载前，用onunload

6.模拟事件：用js模拟一个事件行为的发送。

　　建立事件：createEvent()

　　初始化事件：initMouseEvent()鼠标事件，initKeyboardEvent()键盘事件

　　触发事件：元素.dispatchEvent()

　　自定义事件：document.createEvent("CustomEvent").initCustomEvent("自定义事件名称")