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

第五章 jQuery事件处理 回顾 DOM元素的操作 创建元素 插入元素 删除元素 替换元素 复制元素 DOM属性的操作 学习目标 页面载入事件（ready()） 事件处理（bind()、 unbind()、one()） 事件委派（live()、die()） 事件切换（hover()、toggle()） 常用事件 浏览器事件 表单事件 键盘事件 鼠标事件 加载页面 jQuery提供了一个名为ready的事件处理方法，用来响应window对象的load事件并执行各种任务。 ready方法可以在DOM载入就绪能够读取并操作时立即调用被绑定的函数。 ready方法不仅具有浏览器兼容性，而且允许注册多个事件处理程序，并在加载页面后立即执行任务。 在一个页面中可以对ready方法进行多次调用，每次都会注册一个事件处理程序。当页面加载就绪后，函数会按照定义的先后顺序依次执行。 加载页面 $(document).ready(function(){ // 在这里写你的代码... }); $().ready(function(){ // 在这里写你的代码... }); $(function(){ // 在这里写你的代码... }); 事件处理 bind()方法：将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象。 bind(type, [data], fn) type：字符串，一个或多个javaScript事件类型， 多个事件类型时用空格分隔各类型 data：Map类型，要传递的数据 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) 事件处理 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",function(){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类型，要传递的数据 fn：触发该事件时要执行的函数 事件处理 例：随着鼠标的移动使图像明亮或模糊 事件处理 事件委派 live()方法：将一个事件处理程序附加到所有匹配的元素上，即使这个元素是以后再添加进来的也有效。 live(type, [data], fn) type：字符串，一个或多个javaScript事件类型， 多个事件类型时用空格分隔各类型 data：Map类型，要传递的数据 fn：触发该事