[TOC] >[info]Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行！ ## 事件驱动 1. 事件触发条件:javascript侦测到的用户的操作或是页面的一些行为(怎么发生的) 2. 事件源:引发事件的元素。(发生在谁的身上) 3. 事件处理程序:对事件处理的程序或是函数 (发生了什么事) ## 事件句柄　(Event Handlers) <table class="dataintable"> <tbody> <tr> <th style="width:30%"> 属性 </th> <th> 此事件发生在何时... </th> </tr> <tr> <td> <a target="_top"> onabort </a> </td> <td> 图像的加载被中断。 </td> </tr> <tr> <td> <a target="_top"> onblur </a> </td> <td> 元素失去焦点。 </td> </tr> <tr> <td> <a target="_top"> onchange </a> </td> <td> 域的内容被改变。 </td> </tr> <tr> <td> <a target="_top"> onclick </a> </td> <td> 当用户点击某个对象时调用的事件句柄。 </td> </tr> <tr> <td> <a target="_top"> ondblclick </a> </td> <td> 当用户双击某个对象时调用的事件句柄。 </td> </tr> <tr> <td> <a target="_top"> onerror </a> </td> <td> 在加载文档或图像时发生错误。 </td> </tr> <tr> <td> <a target="_top"> onfocus </a> </td> <td> 元素获得焦点。 </td> </tr> <tr> <td> <a target="_top"> onkeydown </a> </td> <td> 某个键盘按键被按下。 </td> </tr> <tr> <td> <a target="_top"> onkeypress </a> </td> <td> 某个键盘按键被按下并松开。 </td> </tr> <tr> <td> <a target="_top"> onkeyup </a> </td> <td> 某个键盘按键被松开。 </td> </tr> <tr> <td> <a target="_top"> onload </a> </td> <td> 一张页面或一幅图像完成加载。 </td> </tr> <tr> <td> <a target="_top"> onmousedown </a> </td> <td> 鼠标按钮被按下。 </td> </tr> <tr> <td> <a> onmousemove </a> </td> <td> 鼠标被移动。 </td> </tr> <tr> <td> <a target="_top"> onmouseout </a> </td> <td> 鼠标从某元素移开。 </td> </tr> <tr> <td> <a target="_top"> onmouseover </a> </td> <td> 鼠标移到某元素之上。 </td> </tr> <tr> <td> <a target="_top"> onmouseup </a> </td> <td> 鼠标按键被松开。 </td> </tr> <tr> <td> <a target="_top"> onreset </a> </td> <td> 重置按钮被点击。 </td> </tr> <tr> <td> <a target="_top"> onresize </a> </td> <td> 窗口或框架被重新调整大小。 </td> </tr> <tr> <td> <a target="_top"> onselect </a> </td> <td> 文本被选中。 </td> </tr> <tr> <td> <a target="_top"> onsubmit </a> </td> <td> 确认按钮被点击。 </td> </tr> <tr> <td> <a target="_top"> onunload </a> </td> <td> 用户退出页面。 </td> </tr> </tbody> </table> ## 绑定事件 1. 在脚本中绑定,通过获取节点对象进行绑定 ~~~ <script type="text/javascript"> var btn = document.getElementById('btn'); btn.onclick = function () { alert('我被点击了'); } </script> ~~~ 2. 直接在HTML元素绑定 ~~~ <input type="text" onblur="alert('我失去焦点了')"> ~~~ >[danger]**作业：**练习各种常用事件。