本文内容
事件概述
编写事件响应代码
开发中的常用事件简介
事件对象的获取
★ 事件概述
事件与事件的处理
事件的概念
通常鼠标或用户左击的动作我们称之为“事件（Event）” ，而对事件进行处理的函数 ，我们称之为“事件处理程序（Event Handler）”；
事件可以由用户引发（比如用户点击某个按钮），也可能由代码触发（如向Web Service发出数据提取请求的代码，随时报告数据提取的进度以便在页面显示一个进度提示）；
绝大部分事件都是由用户的动作所引发，如：用户按鼠标的按键，就产生click事件，若鼠标的指针在链接上移动就产生mouseover事件等等。
Web应用，其客户端的代码，多采用“事件驱动（Event-Driven）” 的运行模式。
事件与事件的响应代码
事件处理的过程可以表达为：发声事件 → 启动事件处理程序 → 事件处理程序作出反应。
通常把这些事件响应代码放到函数中，称为“事件回调（call back）”函数。
♞ 事件的冒泡（Bubbling Phase）与捕获（Capture Phase）
△ DOM事件流
DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。
DOM事件流事件顺序有两种类型：捕获型事件和冒泡型事件。
△ 冒泡型事件（Bubbling Phase） VS 捕获型事件（Capture Phase）
冒泡型事件的基本思想是，事件按照从最特定的事件目标到最不特定的事件目标（document对象）的顺序触发；
捕获型事件（Capture Phase），是Netscape使用的一种事件响应解决方案。捕获型事件的基本思想是事件从最不精确的对象（document对象）开始触发，然后到最精确的对象（可以是窗口级别捕获事件，不过必须由开发人员特别指定），所以有人也称之为自顶向下的事件模型。
因此冒泡和捕获是恰好相反的两个触发执行顺序。
//**DOM事件，冒泡事件，捕获事件的参考
“好好学一遍JavaScript 笔记(八)——冒泡型事件、捕获型事件”
**//
☢ 注意点
并非所以的浏览器都支持这两类型的事件，就算支持，其事件响应代码的编写方式也未必一致。
★ 编写事件响应代码
方式 1
在事件源对象所对应的HTML标签上增加一个要处理事件属性，让事件属性值等于处理事件的函数名或程序代码。
<元素名字on事件名称="<语句块> | <函数名>">// 一般来说，简短的事件响应代码可直接嵌入到标签中。<button onclick="alert("Hello!")">Run some JavaScript</button>
方式 2
方式 3
也可以全部用代码实现，使用代码直接设置 HTML元素对象的时间属性，让事件属性值等于处理该事件的函数名或程序代码。
对象.on事件=<语句>|<函数名>//语法格式//实际应用myElement.onClick=function(){//...//your event handler code//...};
方式 4 —— 注册/取消事件监听函数的方法参数
DOM中的方法
element.addEventListener('click',observer,useCapture);//注册事件监听函数element.removeEventListener('click',observer,useCapture);//移除已注册的事件监听函数，参数不变//addEventListener方法接收三个参数；//第一个参数是事件名称，//第二个参数observer是回调处理函数，//第三个参数注明该函数是在时间传递过程中的捕获阶段被调用还是冒泡阶段被调用。
特殊的IE
不同的浏览器，提供不同的函数给元素添加事件响应代码。比如早期的IE，就是使用attachEvent( )方法；
// Internet Explorer 8 and previousdocument.attchEvent('onclick',myFunction);
方式 5 事件驱动
处理兼容性问题--添加事件驱动
处理兼容性问题--取消事件驱动
☆ 好消息！
在实际开发中推荐使用jQuery等库，因为它们已将兼容性代码包容，并且经过测试，直接使用他们比较方便可靠。
方式 6 取消事件的继续传递
取消事件的继续传递是指，在特定的地方中断捕获型事件或冒泡型时间的进一步传递，即“某事件的传递到此为止”！
//跨浏览器取消事件传递的典型代码function someHandler(event){event =event || window.event;if(event.stopPropagation){event.stopPropagation();}else{event.cancelBubble =true;}}
方式 6 禁用事件传递后的默认处理
时间传递后的默认处理是指，通常浏览器在事件传递并处理完毕后会执行与该时间关联的默认动作（如果存在这样的动作）。
例如，如果表单中input 元素的type属性是“submit”，那么它被点击后，浏览器就自动提交表单，如果你已经为这个元素的click事件手写了其他代码，那么你可能需要禁用浏览器的这个默认动作。
//跨浏览器的禁用“事件传递后的默认响应功能”示例代码function someHandler(event){event=event || window.event;if(event.preventDefault){event.preventDefault();}else{event.returnValue=false;}}
★ HTML元素常见事件列表
（以下列表中所提到的属性可插入HTML标签中以定义事件处理程序）
|
属性对象 |
属性 |
当以下情况发生时，出现此事件 |
|
document |
onabort |
图像加载被中断 |
|
onblur |
元素失去焦点 |
|
|
onchange |
用户改变域的内容 |
|
|
onclick |
鼠标点击某个对象 |
|
|
ondbclick |
鼠标双击某个图像 |
|
|
onerror |
当加载文档或图像时发生某个错误 |
|
|
onfocus |
元素获得焦点 |
|
|
键盘按键 |
onkeydown |
某个键盘的键被按下 |
|
onkeypress |
某个键盘的键被按下或按住 |
|
|
onkeyup |
某个键盘的键被松开 |
|
|
onload |
某个页面或图像完成加载 |
|
|
鼠标 |
onmousedown |
某个鼠标键被按下 |
|
onmousemove |
鼠标指针在移动 |
|
|
onmouseout |
鼠标从某元素移开 |
|
|
onmouseover |
鼠标移动到某元素之上 |
|
|
onmouseup |
某个鼠标按键被松开 |
|
|
onreset |
重置按钮·被点击 |
|
|
onresize |
窗口或框架被调整尺寸 |
|
|
onselect |
文本被选定 |
|
|
onsubmit |
提交按钮被点击 |
|
|
onunload |
用户退出页面 |
★ 事件对象的获取
事件对象封装了时间的相关信息（比如此事件是由哪个元素触发的）。
IE中，时间对象是window对象的属性event，事件处理函数可以按如下方式访问事件对象：
// IE中事件处理btnSubmit.onclick =function(){varoevent = window.event;}
DOM标准中，event对象是作为唯一的参数传递给事件处理函数：
//DOM中对事件的处理btnSubmit.onclick=function(oevent){alert(oevent);}
事件对象获取示例
<button onclick="demo(event,this)">click</button><!--事件函数中可传递事件对象event，this表示当前的button对象--><script>function demo(event){if(event.type ="click"){alert("clicked!");}var iKeyCode = event.keyCode;/*获取按钮*/var iClientX = event.clientX;var iClientY = event.clientY;/*获取事件的客户端X,Y坐标*/}</script>
注：更多关于 响应事件的示例