jQuery中的事件和动画

1、jQuery中的事件和动画（第四讲（第四讲 ) )知识回顾n操作元素节点的属性方法？ n操作属性的相关属性方法？n操作内容的属性方法？教学内容n事件处理函数nEvent对象njQuery 事件方法重点、难点n重点p事件处理函数pEvent对象pjQuery 事件方法n难点p事件处理函数pEvent对象pjQuery 事件方法事件处理函数n 指定事件处理函数n 绑定到事件处理函数n 移除事件绑定指定事件处理函数n 可以通过下面的方法指定事件处理函数：n jQuery选择器. 事件名(function() n n n );n 例如，前面多次使用的$(document).ready()方法指定文档对

2、象的ready事件处理函数。ready事件当文档对象就绪的时候被触发。绑定到事件处理函数n除了以上介绍的方法外，还可以使用bind()方法和delegate()方法将事件绑定到事件处理函数。1bind()方法bind(type,data,fn)参数说明如下。n type：事件类型。n data：可选参数，作为event.data属性值传递给事件Event对象的额外数据对象。关于Event对象的具体情况将在7.2小节介绍。n fn：绑定到指定事件的事件处理器函数。如果fn函数返回false，则会取消事件的默认行为，并阻止冒泡。【例1】 $(input).bind(click,function()

3、 alert($(this).val(););); 【例2】 function handler(event) alert(event.data.foo); $(input).bind(click, foo: hello , handler); 【例3】$(document).ready(function() $(document).bind(contextmenu,function(e) return false; ); );右击网页，将不会弹出右键菜单2delegate ()方法n使用delegate()方法将制定元素的特定子元素绑定到指定的事件处理函数，语法如下：.delegate( se

4、lector, eventType, handler(eventObject) )参数说明如下。n selector：匹配子元素的选择器。n eventType：事件类型。n handler(eventObject)：事件处理函数。【例4】 p background:yellow; font-weight:bold; cursor:pointer; padding:5px; p.over background: #ccc; span color:red; 接上 Click me! $(body).delegate(p, click, function() $(this).after(Anoth

5、er paragraph!); ); 【例4】的界面移除事件绑定可以使用unbind()方法移除绑定到匹配元素的事件处理器函数。unbind()方法的语法如下：.unbind( eventType , handler(eventObject) )参数说明如下。 eventType：指定要移除的事件类型字符串，例如click或submit。 handler(eventObject)：移出的事件处理器函数。unbind()返回调用它的jQuery对象，从而可以实现链式操作，即在一条语句中对一个HTML元素进行多个操作。【例5】 button margin:5px; button#theone co

6、lor:red; background:yellow; 接上 什么也不做.绑定移除绑定 function aClick() alert(hello);$(#bind).click(function () $(#theone).click(aClick) .text(可以单击!););$(#unbind).click(function () $(#theone).unbind(click, aClick) .text(什么也不做.);); Event对象nEvent对象的属性nEvent对象的方法Event对象的属性属 性说 明currentTarget 触发事件的当前元素。例如，下面的代码在单

7、击p元素时将弹出一个显示true的对话框。$(p).click(function(event) alert( event.currentTarget = this ); / true); data传递给正在运行的事件处理函数的可选数据delegateTarget正在运行的事件处理函数绑定的元素namespace触发事件时指定的命名空间pageX / pageY鼠标与文档边缘的距离relatedTarget事件涉及的其他DOM元素，如果有的话result返回事件处理函数的最后返回值target初始化事件的DOM元素timeStamp浏览器创建事件的时间与1970年1月1日的时间差，单位为msty

8、pe事件类型which用于键盘事件和鼠标事件，表示按下的键或鼠标按钮【例6】 div color:red; $(document).mousemove (function(e) $(#log).text(e.pageX: + e.pageX + , e.pageY: + e.pageY); ); 浏览【例6】的结果【例7】 div color:red; $(#whichkey).keydown(function(e) $(#log).html(e.type + : + e.which );); 浏览【例7】的结果Event对象的方法方 法说 明isDefaultPrevented返 回 是 否

9、 在 此 E v e n t 对 象 上 调 用 过event.preventDefault()方法isImmediatePropagationStopped返 回 是 否 在 此 Eve nt 对 象 上 调 用 过 e ve nt . stopImmediatePropagation ()方法isPropagationStopped返 回 是 否 在 此 Eve nt 对 象 上 调 用 过 e ve nt . stopPropagation ()方法preventDefault如果调用了此方法，则此事件的默认动作将不会触发stopImmediatePropagation阻止执行其余的事件

10、处理函数，并阻止事件在DOM树中冒泡（即在DOM树中的元素间传递）stopPropagation阻止事件在DOM树中冒泡，并阻止父处理函数接到事件的通知提示n 容器元素中可以包含子元素，例如div元素里可以包含img元素。如果在img元素上触发了click事件则也会触发其父元素（div元素）的click事件。这就是事件的冒泡。 【例8】$(document).ready(function() $(a).click(function(event) event.preventDefault(); ););人民邮电出版社jQuery 事件方法n键盘事件n鼠标事件n文档加载事件n浏览器事件键盘事件方

11、法说 明focusin( handler(eventObject) )绑定到focusin事件处理函数的方法。focusin事件当光标进入HTML元素时触发focusout( handler(eventObject) ) 绑定到focusout事件处理函数的方法。Focusout事件当光标离开HTML元素时触发keydown( handler(eventObject) )绑定到keydown事件处理函数的方法。keydown事件当按下按键时触发.keypress( handler(eventObject) )绑定到keypress事件处理函数的方法。keypress事件当按下并放开按键时触发k

12、eyup( handler(eventObject) )绑定到keyup事件处理函数的方法。Keyup事件当放开按键时触发【例9】 function handler(event) alert(event.data.foo); $(#target).keypress(function() alert(Handler for .keypress() called.);); 鼠标事件方 法说 明click( handler(eventObject) )绑定到click事件处理函数的方法。click事件当单击鼠标时触发dblclick ( handler(eventObject) )绑定到dblcli

13、ck事件处理函数的方法。dblclick事件当双击鼠标时触发focusin( handler(eventObject) )绑定到focusin事件处理函数的方法。focusin事件当光标进入HTML元素时触发focusout( handler(eventObject) )绑定到focusout事件处理函数的方法。Focusout事件当光标离开HTML元素时触发hover( handlerIn(eventObject), handlerOut(eventObject) )指定鼠标指针进入和离开指定元素时的处理函数.mousedown( handler(eventObject) )绑定到mouse

14、down事件处理函数的方法。mousedown事件当按下鼠标按键时触发mouseenter( handler(eventObject) )绑定到鼠标进入元素的事件处理函数mouseleave( handler(eventObject) )绑定到鼠标离开元素的事件处理函数.mousemove( handler(eventObject) )绑定到mousemove事件处理函数的方法。mousemove事件当移动鼠标时触发mouseout( handler(eventObject) )绑定到mouseout事件处理函数的方法。Mouseout事件当鼠标指针离开被选元素时触发。不论鼠标指针离开被选元素

15、还是任何子元素，都会触发 mouseout 事件；而只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。mouseover( handler(eventObject) )绑定到mouseover事件处理函数的方法。mouseover事件当鼠标指针位于元素上方时触发.toggle( handler(eventObject) )绑定2个或更多处理函数到指定元素，当单击指定元素时，交替执行时处理函数【例10】 ul margin-left:20px; color:blue; li cursor:default; span color:red; 接上 Milk Milk Bread B

16、read Chips Chips Socks Socks $(li).hover($(li).hover( function () function () $(this).append($( $(this).append($( * * * *);); , , function () function () $(this).find(span:last).remove(); $(this).find(span:last).remove(); ); ); 文档加载事件方 法说 明load( handler(eventObject) )绑定到load事件处理函数的方法。load事件当加载文档时触发r

17、eady ( handler(eventObject) ) 指定当所有DOM元素都被加载时执行的unload( handler(eventObject) )绑定到unload事件处理函数的方法。unload事件当页面卸载时触发【例11】 $(window).load( function () alert(Hello!); ); $(window).load( function () alert(Hello!); ); 浏览器事件方 法说 明error( handler(eventObject) )绑定到error事件处理函数的方法。error事件当元素遇到错误（例如没有正确载入）时触发resi

18、ze ( handler(eventObject) )绑定到resize事件处理函数的方法。resize事件当调整浏览器窗口的大小时触发scroll( handler(eventObject) )绑定到scroll事件处理函数的方法。scroll事件当ScrollBar控件上的或包含一个滚动条的对象的滚动框被重新定位,或按水平（或垂直）方向滚动时触发【例12】 x=0;$(document).ready(function() $(div).scroll(function() $(span).text(x+=1); ); $(button).click(function() $(div).scroll(); ););接上请试着滚动 DIV 中的文本 请试着滚动 DIV 中的文本请试着滚动 DIV 中的文本请试着滚动 DIV 中的文本请试着滚动 DIV 中的文本请试着滚动