RIA应用开发：5-jQuery事件处理

1、第五章 jQuery事件处理回顾DOM元素的操作创建元素插入元素删除元素替换元素复制元素DOM属性的操作学习目标页面载入事件（ready()）事件处理（bind()、 unbind()、one()）事件委派（live()、die()）事件切换（hover()、toggle()）常用事件浏览器事件表单事件键盘事件鼠标事件加载页面jQuery提供了一个名为ready的事件处理方法，用来响应window对象的load事件并执行各种任务。ready方法可以在DOM载入就绪能够读取并操作时立即调用被绑定的函数。ready方法不仅具有浏览器兼容性，而且允许注册多个事件处理程序，并在加载页面后立即执行任务。

2、在一个页面中可以对ready方法进行多次调用，每次都会注册一个事件处理程序。当页面加载就绪后，函数会按照定义的先后顺序依次执行。加载页面$(document).ready(function() / 在这里写你的代码. ); $().ready(function() / 在这里写你的代码. ); $(function() / 在这里写你的代码. ); 事件处理bind()方法：将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象。 bind(type, data, fn) type：字符串，一个或多个javaScript事件类型， 多个事件类型时用空格分隔各类型data：Map类型，要

3、传递的数据fn：触发该事件时要执行的函数事件处理$(#div1).bind(click,function()alert(click div!););$(#div1).bind(mouseenter mouseleave, function() $(this).toggleClass(selected); );$(#div1).bind(click, foo:bar,function(e)alert(e.data.foo););function handler(event) alert(event.data.foo); $(p).bind(click, foo: bar, handler) 事件

4、处理unbind()方法：将先前附加的事件处理程序从元素上移除并返回jQuery对象。使用bind方法附加的任何事件都可以使用unbind移除。unbind(type, fn) type：字符串，包含一个javaScript事件类型fn：当发生该事件时不再执行该函数 （要移除的事件处理程序）事件处理1.移除所有事件处理程序$(“#div”).unbind();2.移除指定事件类型的事件处理程序$(“#div”).unbind(“click”);事件处理 $(#div1).bind(click,function()alert(aaa);); $(#div1).unbind(click,funct

5、ion()alert(aaa);); var handle=function()alert(aaa); $(#div1).bind(click,handle); $(#div1).unbind(click,handle);如果要取消对特定处理程序的绑定，需要对该函数引用，而不是对执行相同操作的不同函数的引用。事件处理one()方法：将事件处理程序附加到匹配元素的指定事件并返回jQuery对象。所附加的事件处理程序最多只能执行一次，之后将自动取消绑定。one(type, data, fn) type：字符串，一个或多个javaScript事件类型， 多个事件类型时用空格分隔各类型data：Map

6、类型，要传递的数据fn：触发该事件时要执行的函数事件处理例：随着鼠标的移动使图像明亮或模糊 $(img).css(opacity,0.4); $(img).bind(mouseover,function()$(img).css(opacity,1.0);); $(img).bind(mouseout,function()$(img).css(opacity,0.4););事件处理练习：实现类似京东商城的商品展示效果。当鼠标移入某一个图片时，图片模糊，鼠标移出时恢复。事件委派live()方法：将一个事件处理程序附加到所有匹配的元素上，即使这个元素是以后再添加进来的也有效。live(type, d

7、ata, fn) type：字符串，一个或多个javaScript事件类型， 多个事件类型时用空格分隔各类型data：Map类型，要传递的数据fn：触发该事件时要执行的函数live()方法是bind() 方法的一个变体。bind() 方法会附加事件处理程序到匹配的元素，但以后再添加的元素则不会有，需要再使用一次bind() 才行。事件委派传递给 .live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。.live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出

8、回应。事件委派$(.clickme).bind(click, function() alert(Bound handler called.); ); $(body).append(Another target); $(.clickme).live(click, function() alert(Bound handler called.); );事件委派die()方法： 从元素上移除先前用live方法附加的事件处理程序并返回jQuery对象。die(type, fn)type：字符串，包含一个javaScript事件类型fn：当发生该事件时不再执行该函数 （要移除的事件处理程序）事件委派$(“

9、#div”).die();$(“#div”).die(“click”);var handle=function()alert(aaa); $(#div1).live(click,handle); $(#div1).die(click,handle);事件切换hover(over, out) 当鼠标移入一个匹配的元素时，触发指定的第一个函数；当鼠标移出该元素时，触发指定的第二个函数。伴随着对鼠标是否仍然处在特定元素中的检测，如果是，则会继续保持“悬停”状态，而不触发移出事件。 $(td).hover( function () $(this).addClass(hover); , function

10、 () $(this).removeClass(hover); ); 事件切换toggle(fn, fn2, fn3, fn4, .) 每次点击后依次调用函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。 事件切换例：当鼠标悬停在某一行时高亮显示。 $(tbody tr:even).addClass(even); $(tbody tr:odd).addClass(odd); $(tbody tr).hover(function()$(this).addCla

11、ss(selected);, function()$(this).removeClass(selected); 常用事件浏览器事件表单事件键盘事件鼠标事件浏览器事件load事件：当某个元素及其所有子元素已经完全加载时，load事件将发送给该元素。unload事件：当用户离开当前页面时，unload事件将发送给window对象。error事件：发送到文档中的引用并由浏览器加载的元素，如果未正确加载，则调用error事件处理程序。resize事件：当对象的大小将要发生变化时触发的事件。scroll事件：当光标移动到一个元素中的不同地方时触发。表单事件blue事件：当一个元素失去焦点时，将向该元素发

12、送blur事件。change事件：当一个元素的值发生变化时，将向该元素发送change事件。仅适用于单行文本框、文本区域和选择框。对于选择框，在用户进行选择时立即触发；对于文本框和文本区域，将延迟到元素失去焦点时触发。focus事件：当一个元素获得焦点时，将向该元素发送focus事件。仅适用于表单域和超链接。表单事件select事件：当用户在一个元素内选定文本时，将向该元素发送select事件。事件仅适用于文本框和文本区域。submit事件：当用户试图提交表单时，将向表单元素发送submit事件。该事件只能附加到元素上。键盘事件keydown事件：当用户在键盘上按下一个键时，将向元素发送key

13、down事件。keyup事件：当用户在键盘上释放一个键时，将向元素发送keyup事件。keypress事件：当浏览器在注册键盘输入时，将向元素发送keypress事件。为了确定键入哪个字符，可对传入事件处理程序的事件对象进行检查。在jQuery事件模型中，使用witch属性可以检索字符代码。键盘事件例：获取当前按键的值$(document).keydown(function (e) var code = 按键代码 = + e.which + ; code+=, 字符 = + String.fromCharCode(e.which) + ; $(div.container).append(cod

14、e););$(document).keyup(function (e) if (e.which = 27) $(div.container).html(););鼠标事件click事件：当在某一个元素上按下并释放鼠标按钮时，向该元素发送click事件。dbclick事件：当双击一个元素时，将向该元素发送dbclick事件。focusin事件：当一个元素或其内部的任何元素获得焦点时，向该元素发送focusin事件。focusout事件：当一个元素或其内部的任何元素失去焦点时，向该元素发送focusin事件。鼠标事件mousedown事件：当在某一个元素上按下鼠标按钮时触发mousedown事件。mouseup事件：当在某一个元素上释放鼠标按钮时触发mousedown事件。mousemove事件：当在某个元素内移动鼠标按钮时触发mousemove事件。mouseover事件：当鼠标进入某个元素时触发该事件。mouseout事件：当鼠标移出某个元素时触发该事件。常用事件例：创建下