《JavaScript高级程序设计（第3版）》——事件（十三）

事件是将JavaScript与网页联系在一起的主要方式。事件流事件流：从页面中接收到事件的顺序。事件冒泡IE的事件流叫做事件冒泡：事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。事件捕获Netscape Communicator团队提出的，与事件冒泡相反。用意：在事件到达预定目标之前捕获它。DOM 事件流“DOM2 级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。事件处理程序事件：用户或浏览器自身执行的某种动作。如：click、load、mouseover等。事件处理程序：响应某个事件的函数。HTML事件处理程序<script type=“text/javascript”> function showMessage(){ alert(“Hello World!”); }</script><input type=“button” value =“Click Me” onclick=“showMessage()” />DOM0 级事件处理程序添加var btn = document.getElementById(“myBtn”);btn.onclick = function (){ alert(this.id);}删除事件处理程序btn.onclick = null;DOM2 级事件处理程序addEventListener(要处理的事件名，作为事件处理程序的函数，布尔值)removeEventListener(要处理的事件名，作为事件处理程序的函数，布尔值)布尔值：true：在捕获阶段调用事件处理程序false：在冒泡阶段调用事件处理程序var btn = document.getElementById(“myBtn”);var hander = function(){ alert(this.id);};// 添加事件处理程序btn.addEventListener(“click”, hander, false);// 删除事件处理程序btn.removeEventListener(“click”, hander, false);主要好处：可以添加多个事件处理程序，按照添加的顺序触发。IE事件处理程序attachEvent(事件处理程序名称，事件处理程序函数)detachEvent(事件处理程序名称，事件处理程序函数)var btn = document.getElementById(“myBtn”);var hander = function(){ alert(this.id);};// 添加事件处理程序btn.attachEventr(“onclick”, hander);// 删除事件处理程序btn.detachEvent(“onclick”, hander);主要好处：可以添加多个事件处理程序，按照添加相反的顺序触发。跨浏览器的事件处理程序addHander(要操作的元素，事件名称，事件处理程序函数)removeHander(要操作的元素，事件名称，事件处理程序函数)事件对象event事件对象阻止事件捕获、事件冒泡： var btn = document.getElementById(“myBtn”); btn.onclick = function(event){ alert(“Clicked”); event.stopPropagation(); }; document.body.onclick = function(event){ alert(“Body clicked”); };事件类型UI事件：不一定与用户操作有关的事件DOMActive 不建议使用loadunloadaborterrorresizescroll焦点事件blur 失去焦点时不会冒泡DOMFocusIn 获得焦点冒泡DOMFocusOut 失去焦点focus 获得焦点不会冒泡focusinfocusout鼠标与滚轮事件键盘与文本事件keydownkeypresskeyup复合事件变动事件HTML5 事件设备事件触摸与手势事件事件性能事件处理程序是函数。在JavaScript中，每个函数都是对象，都会占用内存。内存中的对象越多，性能就越差。事件委托目的：解决“事件处理程序过多”问题。实现：利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。使用事件委托，只需要在 DOM 树中尽量最高的层次上添加一个事件处理程序。如下例子，由于所有列表项都是这个元素"myLinks"的子节点，而且它们的事件会冒泡，所以单击事件最终会被这个函数处理。<!DOCTYPE html><html><head> <title>Event Delegation Example</title> <script type=“text/javascript” src=“EventUtil.js”></script></head><body> <ul id=“myLinks”> <li id=“goSomewhere”>Go somewhere</li> <li id=“doSomething”>Do something</li> <li id=“sayHi”>Say hi</li> </ul> <script type=“text/javascript”> (function(){ var list = document.getElementById(“myLinks”); EventUtil.addHandler(list, “click”, function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); switch(target.id){ case “doSomething”: document.title = “I changed the document’s title”; break; case “goSomewhere”: location.href = “http://www.wrox.com”; break; case “sayHi”: alert(“hi”); break; } }); })(); </script></body></html>移除事件处理程序从文档中移除带有事件处理程序的元素时，最好先手工移除事件处理程序。以免内存中留有“空事件处理程序”。btn.onclick = null;在卸载页面之前，先通过 onunload事件处理程序移除所有事件处理程序。以免内存中留有“空事件处理程序”。模拟事件在测试Web应用程序中，模拟触发事件是一种极其有用的技术。流程：创建事件对象初始化事件对象触发事件