首页 > 代码库 > javascript高级程序设计 第十三章--事件
javascript高级程序设计 第十三章--事件
javascript高级程序设计 第十三章--事件
js与HTML的交互就是通过事件实现的，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
事件流：事件流描述的是从页面中接收事件的顺序，IE的是事件冒泡流，Netscape的是事件捕获流，这个两个
是完全相反的事件流概念。
事件冒泡：由最具体的元素接收，然后逐级向上传播到更高级的节点，即事件沿DOM树向上传播，直到document
对象。
事件捕获：不大具体的节点应该更早接收到事件，相当于沿DOM节点树向下级传播直到事件的实际目标，在浏
览器中，是从window对象开始捕获事件的
DOM事件流： DOM事件流规定了三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段 ，实际的目标在
捕获阶段不会接收到事件，这是实际目标处于处于目标阶段
事件处理程序：影响某个事件的函数就叫做事件处理程序（或事件侦听器）比如：click事件的事件处理程序就是
onclick
HTML事件处理程序：某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定，
可以包含要执行的具体操作，也可以调用在页面其他地方定义的脚本；事件处理程序的代码执行时，有权访问全
局作用域中的任何代码；还可以使用with语句扩展作用域。
DOM0级事件处理程序：首先要取得一个要操作对象的引用，这时候的事件处理程序是在元素的作用域中运行。
DOM2级事件处理程序：定义了用于处理指定和删除事件处理程序的方法：addEventListener() 和
removeEventListener()，它们接收三个参数：事件名、作为事件处理的函数和一个布尔值（true表示在捕获阶
段调用事件处理程序，false表示在冒泡阶段调用事件处理程序）
IE事件处理程序： 定义了两个方法，attachEvent()和detachEvent() 接收两个参数：事件处理程序名称和事件
处理程序函数，使用这种方法事件处理程序会在全局作用域中运行。
事件对象：在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息
DOM中的事件对象：浏览器一般都会将一个event对象传入到事件处理程序中。event.type属性表示事件的类型
在事件处理程序内部，对象this始终指向正在处理事件的那个元素，即event对象的currentTarget属性，总之，
event对象一样具有多种属性和方法，只有在事件处理程序执行期间，event对象才存在；一旦事件处理程序
执行完毕，event对象就会被销毁；
IE中的事件对象：要访问IE 中的event对象取决于指定事件处理程序的方法。当使用DOM0级方法添加事件处理
程序时，event对象作为window对象的一个属性存在；使用HTML特性指定的事件处理程序时可以通过一个名
叫event的变量来访问event对象。还有一点就是事件处理程序的作用域是根据指定它的方式来确定的，this对象
不会始终等于事件目标（这时可以使用event.srcElement）
事件类型：UI事件：当用户与页面上的元素交互时触发。load：当页面完全加载后（包括所有图像、js文件、
css文件等外部资源）就会触发window上面的load事件，定义onload事件处理程序，第一种方式是使用js代码
调用EventUtil.addHandler方法；第二种方式是为<body>元素添加一个onload特性
unload事件：这个事件在文档被完全卸载后触发，或者用户从一个页面切换到另一个页面也会触发unload事件
这个事件多用来清除引用，避免内存泄露。指定onunload事件处理程序的方式和onload事件一样；
resize事件：当浏览器窗口被调整到一个新的高度或宽度时，就会触发resize事件。这个事件在window上面
触发，通过js代码来指定： EventUtil.addHandler(window,"resize",function(event){alert("Event");});
scroll事件：scroll事件是在window对象上发生的，但它实际上表示的则是页面中相应元素的变化。
焦点事件：焦点事件会在页面获得或失去焦点时触发，利用这些事件和document.hasFocus()方法及
document.activeElement()方法配合。
blur：在元素失去焦点时触发，这个事件不会冒泡，所有浏览器都支持它
DOMFocusIn：在元素获得焦点时触发，与HTML事件focus等价，但它会冒泡，只有opera支持
DOMFocusOut：元素失去焦点时触发，与HTML事件blur等价，但它会冒泡，只有opera支持
focus：在元素获得焦点时触发，不会冒泡所有浏览器都支持它
focusin：在元素获得焦点时触发，与HTML事件focus等价，但它会冒泡
focusout：元素失去焦点时触发，这个事件是HTML事件blur的通用版本
鼠标与滚轮事件
click：单击鼠标或者按下回车键时触发
dblclick：双击鼠标时触发
mousedown：用户按下了任意鼠标按钮时触发，不能通过键盘触发
mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发，事件不会冒泡，移动到后代元素上也
不会触发
mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发，事件不会冒泡，移动到后代元素上也
不会触发
mousemove：当鼠标指针在元素内部移动是重复地触发
mouseout：在鼠标指针位于一个元素上方，然后用户将其移入到另一个元素时触发
mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发
mouseuop：在用户释放鼠标时触发
客户区坐标位置：鼠标事件都是在浏览器视口中的特定位置上发生的，这个位置信息保存在事件对象的
clientX和clientY属性中，所有浏览器都支持这两个属性，它们 的值表示事件发生时鼠标指针在视口中的水平
和垂直坐标
页面坐标位置：页面坐标通过事件对象的pageX和pageY属性告诉我们事件是在页面中的什么位置发生的，这
两个属性表示鼠标光标在页面中的位置
屏幕坐标位置：鼠标事件发生时，不仅会有相对于浏览器窗口的位置，还有一个相对于整个电脑屏幕的位置，
通过screenX和screenY属性可以访问到鼠标指针相对于整个屏幕的坐标信息
修改键：在按下鼠标时键盘上的某些键的状态也可以影响到所要采取的操作，这些修改键是shift Ctrl Alt Windows
键盘与文本事件
keydown：当用户按下键盘上的任意键时触发，如果按住不放会重复触发此事件
keypress：当用户按下键盘上的字符键时触发，如果按住不放会重复触发此事件（Esc也会触发）
keyup：当用户释放键盘上的键时触发
键码：在发生keydown和keyup事件时，event对象的keyCode属性中会包含一个代码，与键盘上一个特定的
键对应。
textInput事件：当用户在可编辑区域中输入字符时，就会触发textInput事件，该事件只会在用户按下能够输入
实际字符的键时才会被触发，textInput事件的event对包含一个data属性，这个属性的值就是用户输入的字符；
还有一个inputMethod,表示把文本输入到文本框的方式。
复合事件：复合事件用于处理IME的输入序列，可以让用户输入在物理键盘上找不到的字符，但只有IE9+支持
这个事件。
变动事件：总结来说变动事件就是HTML中DOM节点树发生变化时触发的一系列事件，包括添加节点、删除
节点、替换节点等操作
HTML5事件
contextmenu事件：用以表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的
菜单；contextmenu是冒泡的，可以为document指定一个事件处理程序
beforeunload：这个事件在浏览器卸载页面之前触发，可以通过它来取消卸载并继续使用原有页面。要显示
弹出对话框，要把event.returnValue的值设为要显示给用户的字符串，同时作为函数的值返回
DOMContentLoaded事件：在形成完整的DOM树之后就会触发，不理会图像、js文件、css文件或其他资源
是否下载完毕
readystatechange：提供与文档或元素的加载状态有关的信息，readystatechange事件的每个对象都有一个
readyState属性，返回文档或元素的加载状态
pageshow事件：这个事件会在页面显示时触发（load事件后触发），虽然这个事件的目标是document，但
必须将其事件处理程序添加到window中
pagehide事件：该事件会在浏览器卸载页面的时候触发（unload之前触发），其特性与pageshow事件一样
hashchange事件：该事件在URL的参数列表发生变化时触发，hashchange事件的事件处理程序要添加到
window中，此时的event对象包含两个属性：oldURL和newURL 这两个属性分别保存着参数列表变化前后
的完整URL
内存与性能：在javascript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。
事件委托：事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件处理程序，
这样就不必在每个目标元素上都去添加事件了。
移除事件处理程序：可以把与目标函数绑定的函数设置为null，或者通过onunload事件处理程序移除所有事件
处理程序。
模拟事件
DOM中的事件模拟：可以在document对象上使用createEvent()方法创建event对象，这个方法接收一个参数
即要表示创建的事件类型字符串。模拟事件主要分为模拟鼠标事件和模拟键盘事件，当然也有模拟其他事件，
调用createEvent()方法后，再调用dispatchEvent()方法来触发事件。创建鼠标事件对象的方法是为createEvent()
传入字符串"MouseEvents"，返回的对象有一个initMouseEvent()方法，用于指定与该鼠标事件有用的信息。
模拟键盘事件的方法类似，为createEvent()方法传入"KeyboardEvent",返回的对象有一个initKeyEvent()
方法。 事件模拟很大程度上提升了页面的性能和内存。
javascript高级程序设计 第十三章--事件