页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
常见 DOM 事件： 鼠标事件键盘事件表单事件文档/窗口事件clickkeypresssubmitloaddblclickkeydownchangeresizemouseenterkeyupfocusscrollmouseleave blurunload
事件绑定
文档装载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用on()方法来对被选元素及子元素上添加一个或多个事件处理程序。
注意： 自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品 。 该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。 提示： 如需移除事件处理程序，请使用Off()方法。 提示：如需添加只运行一次的事件然后移除，请使用one()方法。语法
$(selector).on(event,childSelector,data, function,map)参数描述event必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。childSelector可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。data可选。规定传递到函数的额外数据。function可选。规定当事件发生时运行的函数。map规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。
范例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <style type="text/css"> *{margin:0;padding:0;} body { font-size: 13px; line-height: 130%; padding: 60px } #panel { width: 300px; border: 1px solid #0050D0 } .head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; } .content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block;display:none; } </style> <script src="scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $( function(){ // $("#panel h5.head").on("mouseover",function(){ // $(this).next().show(); // }).on("mouseout",function(){ // $(this).next().hide(); // }) // 与上一段代码等价，只是简化了代码 $("#panel h5.head").on("mouseover mouseout", function(){ $( this).next().toggle(); }); }) </script> </head> <body> <div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div> </body> </html> View Code
移除事件
off() 方法通常用于移除通过 on() 方法添加的事件处理程序。
自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
注意：如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数。
提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。
$(selector).off(event,selector, function(eventObj),map)
事件对象的属性和方法
方法描述event.currentTarget在事件冒泡阶段内的当前 DOM 元素event.data包含当前执行的处理程序被绑定时传递到事件方法的可选数据event.delegateTarget返回当前调用的 jQuery 事件处理程序所添加的元素event.isDefaultPrevented()返回指定的 event 对象上是否调用了 event.preventDefault()event.isImmediatePropagationStopped()返回指定的 event 对象上是否调用了 event.stopImmediatePropagation()event.isPropagationStopped()返回指定的 event 对象上是否调用了 event.stopPropagation()event.namespace返回当事件被触发时指定的命名空间event.pageX返回相对于文档左边缘的鼠标位置event.pageY返回相对于文档上边缘的鼠标位置event.preventDefault()阻止事件的默认行为event.relatedTarget返回当鼠标移动时哪个元素进入或退出event.result包含由被指定事件触发的事件处理程序返回的最后一个值event.stopImmediatePropagation()阻止其他事件处理程序被调用event.stopPropagation()阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知event.target返回哪个 DOM 元素触发事件event.timeStamp返回从 1970 年 1 月 1 日到事件被触发时的毫秒数event.type返回哪种事件类型被触发event.which
返回指定事件上哪个键盘键或鼠标按钮被按下
常用jQuery事件的范例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <script src="scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $( function(){ $("ul li:eq(0)").click( function(){ alert("单击操作"); }); $("ul li:eq(1)").dblclick( function(){ alert("双击操作"); }); $("p").mouseenter( function(){ $("#result").val("mouseenter"); }).mouseleave( function(){ $("#result").val("mouseleave"); }).mousedown( function(){ $("#result").val("mousedown"); }).mouseup( function(){ $("#result").val("mouseup"); }); $("#result").focus( function(){ $( this).css("background-color","#cccccc"); }).blur( function(){ $( this).css("background-color","#ffffff"); }); }) </script> </head> <body> <ul> <li>单击我</li> <li>双击我</li> <div> <p id="p1">请在此处操作鼠标，文本编辑框内容会变化。如果点击文本框，文本框颜色会变化。</p> <input type="text" id="result"/> </div> </ul> </body> </html> View Code
