13事件
JavaScript和HTML之间的交流是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
13.1事件流
事件流描述的是从页面中接收事件的顺序。
IE的事件流叫做事件冒泡（event bubbling），即事件开始有最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。
13.2事件处理程序
事件就是用户或浏览器自身执行的某种动作。而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。
HTML事件处理程序
事件处理程序中的代码在执行时，有权访问全局作用域中的任何代码。局部变量event就是事件对象，在函数内部，this值等于事件的目标元素，注意拓展作用域的方法。
在HTML中指定事件处理程序的缺点：存在时差问题；扩展事件处理程序的作用域链在不同浏览器中会导致不同结果；HTML与JavaScript代码紧密耦合。
DOM0级事件处理程序
通过JavaScript指定事件处理程序的传统方式，就是将一个函数复制给一个事件处理程序的属性。程序中的this引用当前元素。将事件处理程序设置为null之后，再单击按钮将不会有任何动作发生。
DOM2级事件处理程序
addEventListener（）和removeEventListener（）方法用于指定和删除事件处理程序，都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值（true：捕获阶段调用；false：冒泡阶段调用）。使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序（按添加顺序触发）。用removeEventListener（）移除时，参数要相同。
IE事件处理程序
attachEvent（）（可添加多个事件处理程序，以相反的顺序被触发）和detachEvent（）（移除时，参数要相同）参数接收相同的2个参数：事件处理程序名称与事件处理程序函数。
在IE中使用attachEvent（）与使用DOM0级方法的主要区别在于处理程序的作用域。DOM0的作用域为所属元素的作用域，而attachEvent（）在全局作用域中运行，this等于window。
跨浏览器的事件处理程序
第一个要创建的方法是addHandler（），视情况分别使用DOM0级方法、DOM2级方法或IE方法来添加事件
13.3事件对象
在触发DOM上的某个事件时，会产生一个事件对象event。
DOM中的事件对象
对象this始终等于currentTarget的值，而target则只包含事件的实际目标。在需要通过一个函数处理多个事件时，可以使用type属性。要阻止特定事件的默认行为，可以使用preventDefault（）（前提是cancelable属性设置为true）。stopPropagation（）方法用于立即阻止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡。事件的eventPhase属性，可以用来确定事件当前正处于事件流的哪个阶段。
IE中的事件对象
用event.srcElement表示事件目标比较保险。preventDefault（）方法可以取消给定事件的默认行为（returnValue设置为false）。cancelBubble属性用来停止时间冒泡。
跨浏览器的时间对象
13.4事件类型
UI事件
UI事件指的是那些不一定与用户操作有关的事件。
当页面完全加载后（包括所有图像、JavaScript文件、CSS文件等外部资源），就会触发window上面的load事件。有两种定义方式：通过JavaScript来指定事件处理程序的方式（推荐用这种）；为<body>元素添加一个onload特性。新图像不一定要从添加到文档后才开始下载，只要设置了src属性就会开始下载。
unload事件在文档被完全卸载后触发。利用这个事件最多的情况是清除引用，以避免内存泄漏。有两种方式定义（和load一样）。
当浏览器窗口被调整到一个新的高度或宽度时，就会触发resize事件，可以通过JavaScript或者<body>元素中的onresize特性来指定事件处理程序。
在混杂模式，可以通过<body>元素的scrollLeft和scrollTop来监控scroll事件，在标准模式下，可以通过<html>元素来放映这一变化。
焦点事件
焦点事件会在页面获得或失去焦点时触发，与document.hasFocus（）和document.activeElement属性配合。
6个焦点事件：blur（不冒泡）、DOMFocusOut、focusout、focus（不冒泡）、DOMFocusIn、focusin。
鼠标和滚轮事件
9个鼠标事件：mousedown、mouseup、click、dblclick、mouseenter、mouseleave、mousemove、mouseout和mouseover
客户区坐标位置：clientX、clientY
页面坐标位置：pageX、pageY
屏幕坐标位置：screenX、screenY
DOM规定了4个属性，表示修改键的状态：shiftKey、ctrlKey、altKey和metaKey
event对象的relatedTagrget属性提供了相关元素的信息，这个属性只对于mouseover和mouseout事件才包含值，对于其他事件，这个属性的值是null。
event对象的button属性表示按下或释放的按钮。
event对象的detail属性给出了事件的更多信息。
鼠标滚轮（mousewheel）事件包含一个wheelDelat属性。将mousewheel事件处理程序指定给页面中的任何元素或document对象，即可处理鼠标滚轮的交互操作。
触摸设备、无障碍性问题
键盘和文本事件
3个键盘事件：keydown（任意键）、keypress（字符键）和keyup。只有一个文本事件textInput，是对keypress的补充。
发生keydown或keyup事件时，event对象的keyCode属性中包含一个代码，与键盘上一个特定的键对应。发生keypress事件时，event对象包含charCode属性。
用户在可编辑区域中 输入字符时，会触发textInput事件，它的event对象中还包含一个data属性，这个属性的值就是用户输入的字符（而非字符编码），event的inputMethod属性表示把文本输入到文本框中的方式。
复合事件
复合事件是DOM3级事件中新添加的一类事件，用于处理IME的输入序列。有3种复合事件：compositionstart、compositionupdate和compositionend
变动事件
DOM2级的变动事件能够在DOM中的一部分发生变化时给出提示。
DOMSubtreeModified、DOMNodeInserted、DOMNodeRemove、DOMNodeInsertedIntoDocument、DOMNodeRemoveFromDocument、DOMAttrModified、DOMCharacterDataModified，删除节点和插入节点。
HTML5事件
通常使用contextmenu事件来显示自定义的上下文菜单，使用onclick事件处理程序来隐藏该菜单。
beforeunload事件是为了让开发人员有可能在页面卸载钱阻止这一操作。
与load事件不同，DOMContentLoaded支持在页面下载的早期添加事件处理程序，这也就意味着用户能够尽早地与页面经行交互。
readystatechange事件的目的是 提供与文档或元素的加载状态有关的信息，<script>和<link>元素也会触发readystatechange事件，可以用来确定外部的JavaScript和CSS文件是否已经加载完成。
pageshow事件在页面显示时触发，这个时间的目标是document，但必须将其事件处理程序添加到window，包含一个persisted的布尔值属性，页面保存在bfcache中，则这个属性的值为true。pagehide事件在浏览器卸载页面的时候触发。
haschange事件会在URL参数列表发生变动时通知开发人员，必须添加给window对象，包含两个属性oldURL和newURL。
设备事件
设备事件可以让开发人员确定用户怎样使用设备。
orientationchange事件，window.orientation属性。MozOrientation事件。deviceorientation事件。devicemotion事件
触摸和手势事件
触摸事件：touchstart、touchmove、touched和touchcancel。3个用于跟踪触摸的属性：touches、targetTouchs、changeTouches
3个手势事件：gesturestart、gesturechange和gestureend
13.5内存和性能
事件委托
对“事件处理程序过多”问题的解决方案就是时间委托。事件委托利用了时间冒泡，只指定一个事件处理程序，就可以管理某一类的所有事件。使用事件委托，只需在DOM树中尽量最高的层次上添加一个事件处理程序。
移除时间处理程序
13.6模拟事件
DOM中的事件模拟
在document对象上使用creatEvent（）方法创建event对象，参数可以是：UIEvents、MouseEvents、MutationEvents和HTMLEvents。模拟事件的最后一步就是触发事件，使用dispatchEvent（）方法。
模拟鼠标事件，模拟键盘事件。模拟其他事件，自定义DOM事件
IE中的事件模拟
posted on 2017-02-16 13:30 U201113877 阅读(113) 评论(0) 编辑 收藏 举报
