Lecture10DOMEvents(C).ppt

* * * * * * * * * * * * * * * * * Web 2.0 Programming – DOM Events * / 23 * South China University of Technology Web Programming School of Computer Science and Engineering, South China University of Technology 第10讲 DOM事件 概要 观察者模式 DOM 2 事件流 事件处理 事件驱动编程 事件驱动编程: 编写由用户事件驱动的程序 观察者模式 事件使得对象有多个观察者队列 Event 观察者模式 观察者模式 是基于事件驱动编程 我们如何把观察者模式运用到复杂的DOM树上呢? 概要 观察者模式 DOM 2 事件流 事件处理 每个事件都有一个目标, 这个目标可以经由事件取得 element.onclick = handler(e);function handler(e){ if(!e) var e = window.event; // e refers to the event // see detail of event var original = e.eventTarget;} 每个事件都从浏览器开始, 传递到DOM DOM通过3个阶段传播这事件: 捕捉阶段, 目标阶段, 冒泡阶段(一些事件没有冒泡阶段, 例如读取一个文件元素的事件.) 注册一个捕捉阶段句柄: (IE 不能这样做)element.addEventListener(click,handler,true); 事件流 事件流 停止一个事件的传播 在一个事件句柄中抛出异常 在一个句柄中调用 event.stopProgagation(); 取消事件 取消默认的动作(例如当按下一个超链接导向一个新页面的时候): event.preventDefault(); 注册事件句柄 行内: a href=somewhere.html onClick=doSomething() 传统的: element.onclick = doSomething; DOM 2: element.addEventListener(click, doSomething, false); IE: (邪恶!) element.attachEvent(onclick, doSomething); Prototype: (完美 ?) Event.observe(target, click, doSomething); document.observe(dom:loaded, doSomething); 更多的细节 概要 观察者模式 DOM 2 事件流 事件处理 关键字 this 所有的JavaScript代码实际上是在一个对象上运行的 默认地, 代码运行在全局 window 对象中 所有你所声明的全局变量和函数都会成为 window 的一部分 this 关键字指向当前对象 事件句柄运行于它所注册的元素域里, 因此它可以使用 this 去访问这个元素的DOM节点,，那就是说： 在这句柄中, 那一个元素成为 this 指向的对象(而不是 window对象) DOM 2 事件类型 UI 事件类型: DOMFocusIn, DOMFocusOut, DOMActivate 鼠标事件类型: click, mousedown, mouseup, mouseover, mousemove, mouseout 键盘事件类型: (不在DOM 2中, 但会出现在DOM 3里) 突发事件: DOMSubtreeModified, DOMNodeInserted, … HTML 事件类型: load, unload, abort, error, select, change, submit, reset, focus, blur, resize, scroll 更多的细节 常用的事件类型 问题: 事件是非常棘手的, 而且有跨浏览器的兼容性问题: 模糊的W3C事件规范; IE不遵守网页规范; 等等. 解决方案: Prototype 包含很多与事件相关的特性和修复 abort blur change click dblclick error keydown keypress keyup load mousedown mousemove mouseover mouseup reset resize select submit focus mouseout unload 用Prototype附加事件句柄 要使用Prototype的事件特性, 你必须使用DOM