《jQuery程序设计基础教程 工业和信息化普通高等教育“十二五”规划教材 教学课件 ppt 作者 姚敦红 杨凌 张志美 李晓黎 等编著 第7章》由会员分享，可在线阅读，更多相关《jQuery程序设计基础教程 工业和信息化普通高等教育“十二五”规划教材 教学课件 ppt 作者 姚敦红 杨凌 张志美 李晓黎 等编著 第7章（47页珍藏版）》请在金锄头文库上搜索。
1、,jQuery程序设计基础教程,授课教师： 职务：,第7章 事件处理,课程描述 jQuery可以很方便地使用Event对象对触发的元素的事件进行处理，jQuery支持的事件包括键盘事件、鼠标事件、表单事件、文档加载事件和浏览器事件等，其中表单事件处理已经在第6章中做了介绍。,本章知识点,7.1 事件处理函数 7.2 Event对象 7.3 jQuery 事件方法,7.1 事件处理函数,7.1.1 指定事件处理函数 7.1.2 绑定到事件处理函数 7.1.3 移除事件绑定,7.1.1 指定事件处理函数,可以通过下面的方法指定事件处理函数： jQuery选择器. 事件名(function() );
2、 例如，前面多次使用的$(document).ready()方法指定文档对象的ready事件处理函数。ready事件当文档对象就绪的时候被触发。,7.1.2 绑定到事件处理函数,除了7.1.1小节介绍的方法外，还可以使用bind()方法和delegate()方法将事件绑定到事件处理函数。,1bind()方法,bind(type,data,fn) 参数说明如下。 type：事件类型。 data：可选参数，作为event.data属性值传递给事件Event对象的额外数据对象。关于Event对象的具体情况将在7.2小节介绍。 fn：绑定到指定事件的事件处理器函数。如果fn函数返回false，则会取消
3、事件的默认行为，并阻止冒泡。,【例7-1】, $(“input“).bind(“click“,function() alert($(this).val(); ); ); ,【例7-2】, function handler(event) alert(event.data.foo); $(“input“).bind(“click“, foo: “hello“ , handler); ,【例7-3】, $(document).ready(function() $(document).bind(“contextmenu“,function(e) return false; ); ); 右击网页，将不会
4、弹出右键菜单 ,2delegate ()方法,使用delegate()方法将制定元素的特定子元素绑定到指定的事件处理函数，语法如下： .delegate( selector, eventType, handler(eventObject) ) 参数说明如下。 selector：匹配子元素的选择器。 eventType：事件类型。 handler(eventObject)：事件处理函数。,【例7-4】, p background:yellow; font-weight:bold; cursor:pointer; padding:5px; p.over background: #ccc; span
5、 color:red; ,接上, Click me! $(“body“).delegate(“p“, “click“, function() $(this).after(“Another paragraph!“); ); ,【例7-4】的界面,7.1.3 移除事件绑定,可以使用unbind()方法移除绑定到匹配元素的事件处理器函数。unbind()方法的语法如下： .unbind( eventType , handler(eventObject) ) 参数说明如下。 eventType：指定要移除的事件类型字符串，例如click或submit。 handler(eventObject)：移出的
6、事件处理器函数。 unbind()返回调用它的jQuery对象，从而可以实现链式操作，即在一条语句中对一个HTML元素进行多个操作。,【例7-5】, button margin:5px; button#theone color:red; background:yellow; ,接上,什么也不做. 绑定 移除绑定 function aClick() alert(“hello“); $(“#bind“).click(function () $(“#theone“).click(aClick) .text(“可以单击!“); ); $(“#unbind“).click(function () $(“
7、#theone“).unbind(click, aClick) .text(“什么也不做.“); ); ,7.2 Event对象,7.2.1 Event对象的属性 7.2.2 Event对象的方法,7.2.1 Event对象的属性,【例7-6】, div color:red; $(document).mousemove (function(e) $(“#log“).text(“e.pageX: “ + e.pageX + “, e.pageY: “ + e.pageY); ); ,浏览【例7-6】的结果,【例7-7】, div color:red; $(#whichkey).keydown(f
8、unction(e) $(#log).html(e.type + : + e.which ); ); ,浏览【例7-7】的结果,7.2.2 Event对象的方法,提示,容器元素中可以包含子元素，例如div元素里可以包含img元素。如果在img元素上触发了click事件则也会触发其父元素（div元素）的click事件。这就是事件的冒泡。,【例7-8】, $(document).ready(function() $(“a“).click(function(event) event.preventDefault(); ); ); 人民邮电出版社 ,7.3 jQuery 事件方法,7.3.1 键盘事件
9、 7.3.2 鼠标事件 7.3.3 文档加载事件 7.3.4 浏览器事件,7.3.1 键盘事件,【例7-6】, div color:red; $(document).mousemove (function(e) $(“#log“).text(“e.pageX: “ + e.pageX + “, e.pageY: “ + e.pageY); ); ,浏览【例7-6】的结果,【例7-7】, div color:red; $(#whichkey).keydown(function(e) $(#log).html(e.type + : + e.which ); ); ,浏览【例7-7】的结果,7.2.
10、2 Event对象的方法,提示,容器元素中可以包含子元素，例如div元素里可以包含img元素。如果在img元素上触发了click事件则也会触发其父元素（div元素）的click事件。这就是事件的冒泡,【例7-8】, $(document).ready(function() $(“a“).click(function(event) event.preventDefault(); ); ); 人民邮电出版社 ,7.3 jQuery 事件方法,7.3.1 键盘事件 7.3.2 鼠标事件 7.3.3 文档加载事件 7.3.4 浏览器事件,7.3.1 键盘事件,【例7-9】, function hand
11、ler(event) alert(event.data.foo); $(“#target“).keypress(function() alert(“Handler for .keypress() called.“); ); ,7.3.2 鼠标事件,【例7-10】, ul margin-left:20px; color:blue; li cursor:default; span color:red; ,接上, Milk Bread Chips Socks $(“li“).hover( function () $(this).append($(“ *“); , function () $(this
12、).find(“span:last“).remove(); ); ,7.3.3 文档加载事件,【例7-11】, $(window).load( function () alert(“Hello!“); ); ,7.3.4 浏览器事件,【例7-12】, x=0; $(document).ready(function() $(“div“).scroll(function() $(“span“).text(x+=1); ); $(“button“).click(function() $(“div“).scroll(); ); ); ,接上, 请试着滚动 DIV 中的文本 请试着滚动 DIV 中的文本
13、请试着滚动 DIV 中的文本请试着滚动 DIV 中的文本 请试着滚动 DIV 中的文本请试着滚动 DIV 中的文本请试着滚动 DIV 中的文本请试着滚动 DIV 中的文本 滚动了 0 次。 触发窗口的 scroll 事件 页面中包含一个带滚动条的div元素，拉动滚动条，会在下面的span元素中显示滚动的次数。,浏览【例7-12】的结果,页面中包含一个带滚动条的div元素，拉动滚动条，会在下面的span元素中显示滚动的次数。单击“触发窗口的scroll事件”按钮，可以执行$(“div“).scroll();语句。调用scroll()方法可以触发scroll事件，但不会执行滚动操作。浏览【例7-12】的结果如图7-4所示。,
