高级程序设计(第3版)第十三章事件/笔记

事件

事件流

• 事件流描述的是从页面中接收事件的顺序。
• 事件冒泡
• 事件捕获

 

事件处理程序

• xx.onclick = function () {}
• xx.onclick = null
• addEventListener()
• removeEventListener()

• 参一：要处理的事件名
• 参二：做为事件处理程序的函数
• 参三：一个布尔值。

• true ，表示在捕获阶段调用事件处理程序；
• false ，表示在冒泡阶段调用事件处理程序。

 

事件对象

在触发 DOM 上的某个事件时，会产生一个事件对象 event

//在须要经过一个函数处理多个事件时，可使用 type 属性。 var btn = document.getElementById("myBtn"); var handler = function(event){  switch(event.type){  case "click":  alert("Clicked");  break;  case "mouseover":  event.target.style.backgroundColor = "red";  break;  case "mouseout":  event.target.style.backgroundColor = "";  break;  } }; btn.onclick = handler; btn.onmouseover = handler; btn.onmouseout = handler;

事件类型

UI事件

• load事件

• 当页面彻底加载后（包括全部图像、JavaScript 文件、CSS 文件等外部资源），就会触发

EventUtil.addHandler(window, "load", function(){  var image = document.createElement("img");  EventUtil.addHandler(image, "load", function(event){  event = EventUtil.getEvent(event);  alert(EventUtil.getTarget(event).src);  });  document.body.appendChild(image);  image.src = "smile.gif"; }); /新图像元素只要设置了 src 属性就会开始下载。

• unload 事件

• 只要用户从一个页面切换到另外一个页面，就会发生

• resize 事件

• 当浏览器窗口被调整到一个新的高度或宽度时，就会触发

• scroll事件

 

焦点事件

• blur ：在元素失去焦点时触发。这个事件不会冒泡
• DOMFocusIn ：在元素得到焦点时触发。这个事件与 HTML 事件 focus 等价，但它冒泡。
• DOMFocusOut ：在元素失去焦点时触发。这个事件是 HTML 事件 blur 的通用版本。
• focus ：在元素得到焦点时触发。这个事件不会冒泡
• focusin ：在元素得到焦点时触发。这个事件与 HTML 事件 focus 等价，但它冒泡。
• focusout ：在元素失去焦点时触发。

 

鼠标与滚轮事件

• click ：单击主鼠标按钮或者按下回车键时触发。
• dblclick ：双击鼠标按钮
• mousedown
• mouseenter
• mouseleave
• mousemove
• mouseout
• mouseover
• mouseup

 

• clientX 和clientY
• pageX 和 pageY
• screenX 和 screenY

 

键盘与文本事件

• keydown
• keypress
• keyup

 

 

变更事件

 DOMSubtreeModified ：在 DOM 结构中发生任何变化时触发。这个事件在其余任何事件触发后都会触发。

 DOMNodeInserted ：在一个节点做为子节点被插入到另外一个节点中时触发。

 DOMNodeRemoved ：在节点从其父节点中被移除时触发。

 DOMNodeInsertedIntoDocument ：在一个节点被直接插入文档或经过子树间接插入文档以后触发。

　　　　　　　　　　　　　　　　　　这个事件在 DOMNodeInserted 以后触发。

 DOMNodeRemovedFromDocument ：在一个节点被直接从文档中移除或经过子树间接从文档中移除以前触发。

　　　　　　　　　　　　　　　　　　这个事件在 DOMNodeRemoved 以后触发。

 DOMAttrModified ：在特性被修改以后触发。

 DOMCharacterDataModified ：在文本节点的值发生变化时触发。

 

HTML5事件

• contextmenu 事件
• beforeunload 事件
• DOMContentLoaded 事件
• readystatechange 事件

• loading（正在加载）：对象正在加载数据。
• loaded（加载完毕）：对象加载数据完成。
• interactive（交互）：能够操做对象了，但尚未彻底加载。
• complete（完成）：对象已经加载完毕。 这

• pageshow 和 pagehide 事件

• pageshow在页面显示时触发
• 在从新加载的页面中，pageshow 会在 load 事件触发后触发
• 而对于 bfcache中的页面，pageshow 会在页面状态彻底恢复的那一刻触发。
• pagehide 事件会在浏览器卸载页面的时候触发，并且是在 unload 事件以前触发

• hashchange 事件

• 便在 URL的参数列表（及 URL中“#”号后面的全部字符串） 发生变化时通知开发人员。
• 之因此新增这个事件,是由于在 Ajax应用中，开发人员常常要利用URL参数列表来保存状态或导航信息。

EventUtil.addHandler(window, "hashchange", function(event){  alert("Old URL: " + event.oldURL + "\nNew URL: " + event.newURL); }); EventUtil.addHandler(window, "hashchange", function(event){  alert("Current hash: " + location.hash); }); 

设备事件

• orientationchange 事件
• MozOrientation 事件
• deviceorientation 事件
• devicemotion 事件

触摸与手势事件

 

内存和性能

事件委托

　　事件委托利用了事件冒泡，只指定一个事 件处理程序，就能够管理某一类型的全部事件。

移除事件处理程序

　　空事件处理程序

• 从文档中移除带有事件处理程序的元素时。
• 卸载页面的时候

　　解决

• 好的作法是在页面卸载以前，先经过 onunload 事件处理程序移除全部事件处理程序
• 事件委托技术再次表现出它的优点——须要跟踪的事件处理程序越少，移除它们就越容易

 

模拟事件 

　　模拟鼠标事件

　　模拟键盘事件

　　模拟其余事件

　　自定义 DOM事件