第4章 jQuery事件处理机制2ppt课件.ppt

《第4章 jQuery事件处理机制2ppt课件.ppt》由会员分享，可在线阅读，更多相关《第4章 jQuery事件处理机制2ppt课件.ppt（82页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、在此输入您的封面副标题第4章 jQuery事件处理机制2第4章 jQuery事件处理机制 常用事件事件触发和冒泡事件绑定与事件解绑事件对象 学习目标了解熟悉掌握了解jQuery事件触发机制12熟悉jQuery事件绑定和事件解绑的方法及事件对象的属性和方法的使用掌握jQuery常用事件的使用方法和事件冒泡的概念及阻止事件冒泡的方式3 目录事件绑定与事件解绑4.24.24.14.1常用事件事件触发4.34.3点击查看本小节知识架构点击查看本小节知识架构事件冒泡4.44.4点击查看本小节知识架构 目录4.54.5事件对象点击查看本小节知识架构 知识架构4.1 常用事件常用事件1jQuery事件方法2

2、页面加载事件3鼠标事件4焦点事件65 知识架构4.2 事件绑定与事件解绑事件绑定与事件解绑1绑定事件2事件解绑3案例(动态添加和删除表格数据) 知识架构4.3 事件触发事件触发1事件触发的理解2事件触发方式 知识架构4.4 事件冒泡事件冒泡1什么是事件冒泡2如何实现事件冒泡3 知识架构4.5 事件对象事件对象1什么是事件对象2jQuery事件对象的属性和方法3 4.1 常用事件在前端开发中，经常使用事件来完成一些交互操作。举例：举例：文本框获得焦点、鼠标滑过改变样式等。jQuery提供的一些事件：提供的一些事件：p 页面加载事件；p 鼠标事件；p 焦点事件等；jQuery事件方法 4.1 常用

3、事件分类分类事件方法事件方法描述描述鼠标click()单机鼠标左键时触发dbclick()双击鼠标左键时触发键盘keypress()键盘按键(Shift、CapsLock等非字符键除外)被按下时触发keydown()键盘按键被按下时触发jQuery事件方法jQuery中事件方法一般与事件名称相同。例如：例如：单机事件click，对应的事件方法是click()方法。常用事件方法：常用事件方法： 分类分类事件方法事件方法描述描述焦点keyup()键盘按键被松开时触发onfocus()获取焦点时触发onblur()失去焦点时触发改变change()元素的值发生改变时触发其它submit()当表单提交

4、时触发select()当文本框(包括和中的文本被选中的时触发)scroll()当滚动条发生变化时触发resize()当调整浏览器窗口大小时触发4.1 常用事件jQuery事件方法常用事件方法：常用事件方法： 4.1 常用事件$(#btn).click(function() alert(我被单击了););单击事件jQuery事件方法click()事件：事件：单击事件；例如：例如：当单击按钮时就会触发单击事件，执行事件处理函数。 $(#btn).click();4.1 常用事件jQuery事件方法click()事件事件：为元素绑定事件处理函数后，还可以手动触发事件。例如：例如：单击事件 $(#bt

5、n).click(function() console.log(text1););$(#btn).click(function() console.log(text2););4.1 常用事件单击事件当触发事件时，其当触发事件时，其执行顺序与绑定时执行顺序与绑定时的顺序相同。的顺序相同。jQuery事件方法多学一招：多学一招：与JavaScript中的“DOM对象.onclick = function() ;”这种方式不同的是，jQuery允许为同一个对象的同一个事件绑定多个事件处理函数。 4.1 常用事件页面加载事件在网页开发中，操作DOM时，会因为页面元素还没有加载而执行失败，因此引入事件处

6、理函数；解决办法：解决办法：p jQuery提供了ready事件作为页面加载事件；p Javavascirpt提供了onload页面加载事件；区别：区别：ready事件只需页面DOM元素加载完全后便可触发。好处：好处：提高页面的响应速度与onload相比ready事件语法比较灵活； 4.1 常用事件/ 写法1$(document).ready(function() / 页面加载后要执行的代码 );/ 写法2$(function() / 页面加载后要执行的代码 );对比页面加载事件语法：语法：document参数可以省略，写法2比较简洁。 4.1 常用事件window.onload = func

7、tion() console.log(text1);window.onload = function() console.log(text2);执行结果只输出执行结果只输出“text2”。页面加载事件一个页面编写多个onload事件描述：描述：一个页面只能编写一个onload的事件，并且只能执行一次。 4.1 常用事件$(function() console.log(text1););$(function() console.log(text2););在控制台依次输出在控制台依次输出“text1”和和“text2”页面加载事件一个页面编写多个ready事件描述：描述：一个页面中可以包括多个re

8、ady事件，多个事件按照编写顺序依次执行。 4.1 常用事件$(img).load(function() / 元素内容加载完毕后要执行的代码);$(window).load(function() / 页面加载后要执行的代码);window.onload=function();对比多多学学一一招招jQuery的load()方法jQuery提供的另一个关于页面加载的方法load()方法。load()方法会在元素的onload事件中绑定一个事件处理函数，对于不同的元素对象，事件触发的时机也不同。 4.1 常用事件鼠标事件鼠标事件是指鼠标事件是指：用户在点击鼠标或者移动鼠标时触发的事件。jQuery中

9、鼠标事件中鼠标事件： 4.1 常用事件鼠标事件区别：区别：mouseenter和mouseleave触发事件的范围更小，要求鼠标必须移入或移出被选中的元素才可触发。 4.1 常用事件事件事件描述描述click单击鼠标左键时触发的事件dbclick双击鼠标左键时触发的事件mousedown按下鼠标时触发的事件mouseup松开鼠标时触发的事件mouseover鼠标指针移入被选元素或其子元素，都会触发的事件mouseout鼠标指针移出被选元素或任何子元素，都会触发的事件mouseenter鼠标指针移入被选元素时，才会触发的事件mouseleave鼠标指针移出被选元素时触发的事件鼠标事件 div b

10、ackground-color: pink;padding: 20px; margin: 30px;width: 350px;height: 100px; p margin: 20px;padding: 10px; mouseout事件被触发0次 mouseleave事件被触发0次 4.1 常用事件默认样式鼠标事件案例演示：案例演示： var x = 0; var y = 0; $(div.dv).mouseout(function() $(#mOut).text(x += 1); ); $(div.dv).mouseleave(function() $(#mLeave).text(y +=

11、1); );4.1 常用事件鼠标移入移出div父元素5次鼠标事件案例演示：案例演示： 4.1 常用事件鼠标事件案例演示：案例演示：鼠标移出当前元素及其任意子元素时都会触发mouseout事件，而mouseleave事件只有鼠标移出当前元素时才会触发。 4.1 常用事件hover: function( fnOver, fnOut ) return this.mouseenter( fnOver ).mouseleave( fnOut | fnOver );hover()方法源代码多多学学一一招招hover()方法处理鼠标移入和移出事件jQuery中提供了hover()语法对鼠标的移入和移出操作进

12、行处理。语法：语法：$(selector).hover(over, out ); 4.1 常用事件 / 获得焦点 $(input).focus(function() $(input).css(background-color, gray); ); / 失去焦点 $(input).blur(function() $(input).css(background-color, white); );focus(blur)焦点事件jQuery中元素获得焦点时，触发 focus事件，元素失去焦点时触发blur事件。 4.1 常用事件改变事件jQuery提供的change()事件监控表单中元素内容是否改变。

13、仅适用于：仅适用于：input、textarea、select元素控件。例如：例如：文本框、单选按钮、下拉列表等。 4.1 常用事件昵称：密码：性别： 男 女 默认样式改变事件案例演示：案例演示： 4.1 常用事件 / 注册改变事件 $(.info).change(function() $(this).css(background-color, #7FE1A1); );change()事件改变事件案例演示：案例演示：input内容发生改变的时候触发change()事件，并添加背景色。 4.1 常用事件案例星级评分网上购物订单完成后一般会显示评价功能最常见的评价方式就是星级评价。星级评价描述：星

14、级评价描述：p 让卖家获取用户体验度是否良好，用户也能通过此功能表达自己的想法。p 点亮的星星越多，表示用户的满意度越高店家获得的信誉度也就越高。 案例演示步骤：案例演示步骤：当移入某个星星，前面的星星都会被点亮；当鼠标移出，星星将会变暗；单击某个星星后即完成评价；鼠标移出后被点击的星星前面的星星都会被点亮； 后面的星星变暗；4.1 常用事件案例星级评分案例展示 案例演示步骤：案例演示步骤：HTML结构； jQuery特效；4.1 常用事件案例星级评分案例分析 4.1 常用事件案例星级评分案例实现案例演示步骤：案例演示步骤：设计HTML结构与样式； 添加jQuery特效； 4.2 事件的绑定与

15、解绑p 事件绑定方式，分别是on()、bind()和delegate()方法。p 用off()、unbind()和undelegate()方法来解除绑定。绑定事件 4.2 事件的绑定与解绑参数参数描述描述event必须。事件类型，如click、change、mouseover等childSelector可选。要绑定事件的一个或多个子元素data可选。传入事件处理函数的数据，可通过“事件对象.data”获取参数值function必须。事件被触发运行的事件处理函数绑定事件使用on()方法绑定事件不仅适用于当前元素，也适用于动态添加的元素。语法：语法：$(selector).on(event, ch

16、ildSelector, data, function)； 4.2 事件的绑定与解绑 $(#btn).on(click, function() alert(我被单击了); );on()绑定事件on方法绑定事件on()方法在不设置任何可选参数时，表示为指定的元素绑定指定的事件。 4.2 事件的绑定与解绑 $(#btn).on(mouseover mouseout, function() console.log(事件被触发); );on(events，function()绑定事件多个事件使用相同的事件处理函数当多个事件处理函数相同时可以利用on方法依次为多个事件绑定相同处理函数。 4.2 事件的绑

17、定与解绑 $(#btn).on(click: function() alert(我被单击了); ,mouseover: function() $(this).css(backgroundColor, red); );on()绑定事件绑定多个事件为on方法传递对象型的参数时，可以为指定元素绑定多个事件。 4.2 事件的绑定与解绑 $(#dv).on(click, p, function() $(this).css(background-color, red); );on(event,childSeletor,function()绑定事件事件委托为on方法设置可选参数chidSelector时，表

18、示将子元素的事件委托给了父元素进行进行监控。 4.2 事件的绑定与解绑 示例绑定事件事件委托案例演示：案例演示： 示例4.2 事件的绑定与解绑/ 单击按钮通过on()方式为div中添加一个元素$(#btn).on(click, function() / 创建两个p标签，添加到div中 $(这是第1个p).appendTo($(#dv); $(这是第2个p).appendTo($(#dv););绑定事件事件委托案例演示：案例演示：绑定click事件动态添加p元素。 事件委托4.2 事件的绑定与解绑/ 为div中p元素绑定事件$(#dv).on(click, p, function() $(thi

19、s).css(background-color,#6A84E1);绑定事件事件委托案例演示案例演示： 为动态添加p元素添加点击事件并点击后改变背景色。 4.2 事件的绑定与解绑值得一提值得一提多多学学一一招招bind()和delegate()绑定方法值得一提的是，在jQuery中还有bind()和delegate()方法也可以完成事件绑定，但在jQuery新版本中已经由on()方法替代。 4.2 事件的绑定与解绑值得一提值得一提bind()和delegate()这两个方法都是利用on()方法实现的。两者的区别在于，bind()方法将on()方法的第2个参数设为null，而delegate()方

20、法传递了selector参数。多多学学一一招招bind()和delegate()绑定方法 4.2 事件的绑定与解绑值得一提值得一提使用jQuery绑定事件时，如果事件只需要在页面中执行一次，便可以使用one()方法绑定事件。该事件在触发一次后就会失效，不需要手动解绑事件。多多学学一一招招使用one()方法绑定单次事件 $(selector).off(); / 解绑匹配元素的所有事件$(selector).off(click); / 解绑匹配元素的指定事件，如click示例4.2 事件的绑定与解绑事件解绑元素上绑定的事件，在不需要使用时，可以利用jQuery提供的方法进行事件解绑。off()方法

21、方法：适用于解绑事件方法（如click()事件）或on()方法绑定的事件。 / li元素将click事件委托给父元素ul监听$(ul).on(click, li, function() console.log(哈哈);)/ 解绑ul元素上被委托的click事件$(ul).off(click, *);4.2 事件的绑定与解绑事件解绑off()方法还可以在第2个参数中传入特殊值“*”，用于解绑被委托的事件。示例 4.2 事件的绑定与解绑值得一提值得一提对于jQuey中bind()方法和delegate()方法，jQuery也提供了相应解绑事件的方法unbind()和undelegate()，但在j

22、Query新版本中已经由off()方法替代。多多学学一一招招jQuery中的bind()和delegate()方法 unbind: function( types, fn ) return this.off( types, null, fn );,undelegate: function( selector, types, fn ) / ( namespace ) or ( selector, types , fn ) return arguments.length = 1 ? this.off( selector, * ) : this.off( types, selector | *, f

23、n );4.2 事件的绑定与解绑事件解绑unbind()和和undelegate()方法的源码展示：方法的源码展示： div width: 200px;height: 100px; border: 1px solid black;p background-color: #6A84E1; 这是div中的p元素 4.2 事件的绑定与解绑默认页面 事件解绑案例演示：案例演示： 事件解绑/ 单击第1个按钮为div和div中p元素绑定单击事件$(#btn1).click(function() $(#dv).on(click, function() alert(div元素被单击了); ); $(#dv).

24、delegate(p, click, function() alert(p元素被单击了);); alert(事件绑定成功););4.2 事件的绑定与解绑绑定事件案例演示：案例演示：使用on()方法在div元素上注册单击事件，然后使用delegate()方法为div元素的子元素p注册单击事件。 4.2 事件的绑定与解绑事件解绑案例演示：案例演示：无论是单击div元素或p元素都会弹出当前元素被单击的提示框。 4.2 事件的绑定与解绑事件解绑点击解绑事件”按钮后，div元素和p元素的click事件都会被解绑。分析：分析：父元素调用off()方法，父元素和子元素上的相同事件都会被解绑。需要注意：需要注

25、意：点击p元素后，其父元素上的click事件也会被触发。 4.2 事件的绑定与解绑案例动态添加和删除表格数据p 添加和删除表格数据是开发后台管理系统的经常遇到的功能。p 这些功能通常需要依赖脚本代码来实现一些动态操作数据的特效。脚本代码：脚本代码：p jQuery；p Javascript； 4.2 事件的绑定与解绑案例动态添加和删除表格数据案例展示案例演示：案例演示：默认页面； 删除数据； 4.2 事件的绑定与解绑案例动态添加和删除表格数据案例展示案例演示：案例演示： 添加数据； 案例演示：案例演示： HTML结构；4.2 事件的绑定与解绑案例动态添加和删除表格数据案例分析 4.2 事件的绑

26、定与解绑案例演示：案例演示： jQuery特效；案例动态添加和删除表格数据案例分析 4.2 事件的绑定与解绑案例动态添加和删除表格数据案例实现案例演示：案例演示： 设计HTML结构与样式； 4.2 事件的绑定与解绑案例动态添加和删除表格数据案例实现案例演示：案例演示： 添加jQuery特效； 4.2 事件的绑定与解绑案例动态添加和删除表格数据案例实现案例演示：案例演示： 添加jQuery特效； 4.3 事件触发单击事件$(#btn1).click(function() $(this).css(backgroundColor, red););案例演示：案例演示：单击事件触发后，id值为btn1的

27、按钮会将背景色改为red。使用普通事件方法触发事件 4.3 事件触发$(#btn2).click(function() $(#btn1).click(););click()使用普通事件方法触发事件案例演示：案例演示：调用匹配元素click()事件来触发事件。 4.3 事件触发$(#btn2).click(function() $(#btn1).trigger(click););trigger()使用trigger()方法触发事件案例演示：案例演示：调用对象是待触发事件对象，参数是要触发的事件名称。 4.3 事件触发 $(#btn2).click(function() $(#btn1).trig

28、gerHandler(click); );triggerHandler()使用triggerHandler()方法触发事件案例演示案例演示：不会触发浏览器的默认行为。例如：例如：文本框获取焦点后的光标闪烁行为。 4.4 事件冒泡事件传播的两种策略：事件传播的两种策略：事件捕获和事件冒泡。事件捕获：事件捕获：事件传播的顺序是最外层元素向触发事件的元素传递。事件冒泡：事件冒泡：事件传播顺序是从触发事件元素向最外层元素传递。什么是事件冒泡 4.4 事件冒泡如何实现事件冒泡案例演示：案例演示： $(span).click(function() console.log(span元素被单击了); ); $

29、(p).click(function() console.log(p元素被单击了); ); $(div).click(function() console.log(div元素被单击了); );默认页面 4.4 事件冒泡如何实现事件冒泡案例演示：案例演示：事件冒泡的事件传播的方向是从触发事件的元素到顶层。 4.4 事件冒泡如何阻止事件冒泡单击子元素，会向上触发其父元素，祖先元素的单击事件。 4.4 事件冒泡如何阻止事件冒泡使用event.stopPropagation()方法阻止事件冒泡事件的使用会涉及到一个事件对象，即HTML DOM Event对象。 $(span).click(functi

30、on(event) console.log(span元素被单击了); event.stopPropagation(); );stopPropagation() 4.4 事件冒泡如何阻止事件冒泡使用return false语句阻止事件冒泡在span元素的单击事件程序完成之后，调用return false语句。 $(span).click(function() console.log(span元素被单击了); return false; );return false 4.5 事件对象通过事件对象可以获取事件的状态。举例：举例：触发事件的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 $(ele

31、ment).on(click, function(event) / event: 事件对象 );封装什么是事件对象 4.5 事件对象jQuery事件对象的属性和方法属性属性/ /方法方法描述描述type事件类型，如果使用一个事件处理函数来处理多个事件，可以使用此种属性获得事件类型，比如clickdata传递给事件处理程序的额外数据(即事件方法中的data参数)pageX/Y鼠标事件中，鼠标相对于页面原点的水平/垂直坐标keyCode键盘事件中，键盘按键代码delegateTarget当前调用的jQuery事件处理程序的元素对象currentTarget当前触发事件的DOM对象，等同于thist

32、arget事件源，也叫做事件触发者DOM对象，不一定等同于thisstopPropagation()阻止事件冒泡preventDefault()阻止默认行为，例如a元素的href链接加载、表单提交以及click引起复选框的状态切换 4.5 事件对象注意注意delegateTarget、curentTarget和target属性的使用。通过调用事件本身的方法（如click()）为元素绑定事件，并且不通过事件冒泡触发事件时，3个属性返回的元素是相同的。使用事件委托的方式（例如使用on()方法）绑定事件，或者通过事件冒泡触发事件时，3个属性返回的元素便有所不同。jQuery事件对象的属性和方法 4.

33、5 事件对象 $(span).click(function(event) console.log(deletateTarget: + event.delegateTarget); console.log(currentTarget: + event.currentTarget); console.log(target: + event.target); );delegateTarget/currentTarget/target演示事件对象属性使用普通方法绑定事件 4.5 事件对象 $(div).on(click, span, function(event) console.log(deleta

34、teTarget: + event.delegateTarget); console.log(currentTarget: + event.currentTarget); console.log(target: + event.target); );delegateTarget/currentTarget/target演示事件对象属性通过事件委托绑定事件 4.5 事件对象 $(span).click(function() console.log(span元素被单击了); ); $(div).click(function(event) console.log(div元素被单击了); console.log(deletateTarget: + event.delegateTarget); console.log(currentTarget: + event.currentTarget); console.log(target: + event.target); );演示事件对象属性通过事件冒泡触发事件delegateTarget/currentTarget/target 本章小结介绍了jQuery的常用事件，阻止事件冒泡的方式以及事件对象的应用。熟悉jQuery事件触发机制和事件对象属性的用法，能够应用jQuery事件机制灵活的构建动态页面效果。