异步事件驱动编程模型
事件类型
事件目标
事件处理程序或事件监听程序
事件对象
事件传播
- 文档加载和准备就绪事件
//onload()仅在文档及图片全部加载完毕时触发<pre name="code" class="javascript">//当文档加载解析完毕且所有延迟()脚本都执行完毕时会触发DomContentLoaded事件,此时图片和异步(async)脚本可能还在加载<pre name="code" class="javascript">//document.readyState属性随着文档加载过程而变,每次改变都伴随着document上的readystatechange事件<pre name="code" class="javascript">//whenReady函数<pre name="code" class="javascript">var whenReady = (function() { var funds = []; var ready = false; function handler(e) { if(ready) return; if(e.type === "readystatechange" && document.readyState !== "complete") return; for(var i = 0; i<funcs.length; i++) funds[i].call(document); ready = true; funds = null; } if(document.addEventListener) { document.addEventListener("DOMContentLoaded", handler, false); document.addEventListener("readystatechange", handler, false); window.addEventListener("load", handler, false); } else if (document.attachEvent) { document.attachEvent("onreadystatechange", handler); window.attachEvent("unload", handler); } return function whenReady(f) { if(ready) f.call(document); else funds.push(f); }; }());
- 鼠标事件:写一个drag()函数
- 鼠标滚轮事件?
- 拖放事件?
- 键盘事件?
- 文本输入事件?
传统事件类型
- 表单事件
- window事件
- 鼠标事件
- 键盘事件
DOM事件
HTML5事件
- <audio>和<video>
- drag
- 历史管理机制
- HTML表单
- 离线web应用
触摸屏和移动设备事件
注册事件处理程序
- 设置HTML标签属性为事件处理程序(不推荐)
- addEventListener()和removeEventListener()
- attachEvent()和detachEvent()
- IE不支持事件捕获
- attachEvent()允许同一事件处理程序注册多次,且事件触发时,程序执行次数和注册次数一样
事件处理程序的调用
- 事件处理程序的参数——event:function handler(event) { event = event || window.event; }。当函数没有参数时,就调用window.event
- 事件处理程序的运行环境:一般this为事件目标,attachEvent()中为全局(window)对象,可以通过下边的方法hack
target.attachEvent('on'+type, function(event) { return handler.call(target, event); });
- 事件处理程序的作用域
- 事件处理程序的返回值
- 调用顺序:通过对象属性或HTML属性注册优先调用,addEventListener()按顺序调用,attachEvent()可能按照任何顺序调用
- 事件传播:事件“冒泡”。事件捕获 - 事件执行 - 事件冒泡。addEventListener()事件第三个参数设为true,则事件在捕获阶段即执行。IE9以前的浏览器不支持捕获
- 事件取消
function cancelHandler(event) { event = event || window.event; //IE //to do if(event.preventDefault) event.preventDefault(); //标准 if(event.returnValue) event.returnValue = false; //IE return false; //对象属性注册的事件 }
- 取消事件传播:stopPropagation() [IE9之前的IE]cancelBubble属性