高级程序设计(第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 + "
New URL: " + event.newURL);
});  
EventUtil.addHandler(window, "hashchange", function(event){
  alert("Current hash: " + location.hash);
}); 

设备事件

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

触摸与手势事件

 

内存和性能

事件委托

　　事件委托利用了事件冒泡，只指定一个事 件处理程序，就可以管理某一类型的所有事件。

移除事件处理程序

　　空事件处理程序

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

　　解决

• 好的做法是在页面卸载之前，先通过 onunload 事件处理程序移除所有事件处理程序
• 事件委托技术再次表现出它的优势——需要跟踪的事件处理程序越少，移除它们就越容易

 

模拟事件 

　　模拟鼠标事件

　　模拟键盘事件

　　模拟其他事件

　　自定义 DOM事件