《JQuery实战进阶：“web技能”》课件-第四章 jQuery事件处理

JQuery应用开发——jQuery事件处理目录4.1页面加载事件4.2鼠标事件4.3键盘事件4.4案例-移动的小球4.5焦点事件、改变事件4.6事件绑定4.7事件解绑4.8事件冒泡4.9事件对象4.10案例--图片提示案例JQuery应用开发——页面加载事件02ready方法与onload方法的区别目录CONTENT03总结0401页面加载事件01页面加载事件1、事件方法在前端开发中，经常使用事件来完成一些交互操作。举例：文本框获得焦点、鼠标滑过改变样式等。jQuery提供的一些事件：鼠标事件焦点事件改变事件页面加载

事件01页面加载事件2、页面加载事件在网页开发中，操作DOM时，会因为页面元素还没有加载而执行失败，因此引入页面加载事件，也被称为入口函数。两种页面加载事件：JQuery提供了ready方法作为页面加载事件；Javavascirpt提供了onload方法作为页面加载事件；02ready方法1、语法//写法1$(document).ready(function(){//页面加载后要执行的代码});//写法2$(function(){//页面加载后要执行的代码});语法：document参数可以省略，写法2比较简洁。03与$window.onload区别window.onload$(document).ready()执行机制必须等待网页全部加载完毕（包括图片等），然后再执行包裹代码只需等待网页中的DOM结构加载完毕，就能执行包裹代码编写个数只能写一个能写N个执行次数只能执行一次，如果执行第二次，那么第一次的执行会被覆盖可以执行多次，都不会被上一次覆盖简写方案无$(function()

{

})04总结页面加载事件的作用01document.ready()的使用0203document.ready()与window.onload的区别JQuery应用开发——鼠标事件目录CONTENT02常用的鼠标事件案例演示03总结0401什么是鼠标事件01什么是鼠标事件鼠标单击事件鼠标移入事件鼠标双击事件鼠标移出事件鼠标事件是指：用户在点击鼠标或者移动鼠标时触发的事件。jQuery中鼠标事件：02常用鼠标事件事件描述click单击鼠标左键时触发的事件dbclick双击鼠标左键时触发的事件mousedown按下鼠标时触发的事件mouseup松开鼠标时触发的事件mouseover鼠标指针移入被选元素或其子元素，都会触发的事件mouseout鼠标指针移出被选元素或任何子元素，都会触发的事件mouseenter鼠标指针移入被选元素时，才会触发的事件mouseleave鼠标指针移出被选元素时触发的事件03案例演示03案例演示<styletype="text/css">.block{background-color:rgb(0,96,130);padding:20px;margin:30px;width:350px;height:80px;}h4{background-color:rgb(255,255,255);}</style>

<divid="one">鼠标单击：<span>0</span></div><divid="two">鼠标双击：<span>0</span></div><divid="three"class="block"><h4>鼠标划入次数：<spanid="three_1">0</span><br>鼠标划出次数：<spanid="three_2">0</span></h4></div><divid="four"class="block"><h4>鼠标移入次数：<spanid="four_1">0</span><br>

鼠标移出次数：<spanid="four_2">0</span></h4></div>

页面代码03案例演示

varone=0;vartwo=0;varthree_1=0;varthree_2=0;varfour_1=0;varfour_2=0;$("#one").click(function(){$("#onespan").text(one+=1);});

$("#two").dblclick(function(){$("#twospan").text(two+=1);});$("#three").mouseover(function(){$("#three_1").text(three_1+=1);});$("#three").mouseout(function(){$("#three_2").text(three_2+=1);})$("#four").mouseenter(function(){$("#four_1").text(four_1+=1);})$("#four").mouseleave(function(){$("#four_2").text(four_2+=1);})

JQuery代码04总结什么是鼠标事件01常用的鼠标事件02JQuery应用开发移动的小球01任务导入提出任务目录CONTENT02分析任务03任务实施04总结0501

任务导入

同学们，在学习了jQuery的鼠标事件后，我们一起来完成一个jQuery程序吧！02

提出任务本次课任务完成一个jQuery程序，实现红色小球的圆周运动03任务分析任务分析：案例效果：初始状态下，红色小球位于外圆的内侧正上方点击“开始”按钮，红色的小球开始绕着外围的圈转动点击“结束”按钮，红色小球停止在当前位置上实践：让我们动手实践一下吧04

任务实施04

任务实施θ(center_x,center_y)center_x=(R-r)*sin(θ);center_y=(R-r)*cos(θ)θ=度*π/180outer_X=outer_left+R;outer_Y=outer_top+R;Inner_x=outer_x+center_x;Inner_y=

outer_y-center_y;Inner_left=inner_x–r;Inner_top=inner_y-r;(outer_X,outer_Y)(0,0)Inner_leftInner_top修改元素的位置信息01Click事件的应用0205

总结JQuery应用开发——焦点事件和改变事件目录CONTENT02什么是改变事件总结0301什么是焦点事件01焦点事件焦点事件焦点事件即JQuery中元素获得焦点或失去焦点时所对应的处理事件。其中JQuery中元素获得焦点时，触发focus事件，元素失去焦点时触发blur事件。01焦点事件案例//获得焦点$('input').focus(function(){$('input').css('background-color','gray');});//失去焦点$('input').blur(function(){$('input').css('background-color','white');});02改变事件改变事件改变事件即JQuery中提供的change()事件，用来监控表单中元素的内容是否改变。该事件会在元素失去焦点时触发。仅适用于：input、textarea、select元素控件。例如：文本框、单选按钮、下拉列表等。02改变事件案例//改变事件$('input').change(function(){$('input').css('background-color','green');});04总结焦点事件的使用01改变事件的使用02JQuery应用开发——事件绑定目录CONTENT02常见的事件绑定总结0301什么是事件绑定01什么是事件绑定

在前端开发中，有时需要对同一个元素进行多个不同的事件处理。例如，鼠标移动至某一个元素上时出现一种特效，离开时又显示不同的特效，这就需要使用事件绑定对一个元素绑定上一个或多个事件。01什么是事件绑定JQuery1.7以后，JQuery使用on()方法统一了所有事件绑定方法。其语法格式：$(selector).on(event,childSelector,data,function)；参数描述event必须。事件类型，如click、change、mouseover等childSelector可选。要绑定事件的一个或多个子元素data可选。传入事件处理函数的数据，可通过“事件对象.data”

获取参数值function必须。事件被触发运行的事件处理函数02常见事件绑定1、绑定单个事件on()方法在不设置任何可选参数时，表示为指定的元素绑定指定的事件。$('#btn').on('click',function(){alert('我被单击了');});02常见事件绑定2、绑定多个事件方式一：绑定的多个事件，设置同一个处理函数。$('#btn').on('mouseovermouseout',function(){console.log('事件被触发');});02常见事件绑定方式二：绑定的多个事件，设置不同的处理函数。$('#btn').on({'click':function(){alert('我被单击了');

},'mouseover':function(){$(this).css('backgroundColor','red');

}});02常见事件绑定3、事件委托为on方法设置可选参数chidSelector时，表示将子元素的事件委托给了父元素进行监控。$('#dv').on('click’,‘p’,function(){$(this).css('background-color','red');});02常见事件绑定3、事件委托1、减少内存消耗和dom操作，提高性能。2、实现动态事件绑定。04总结事件绑定on()方法01on()方法的3种常用方式02JQuery应用开发——事件解绑目录CONTENT02常见的事件解绑总结0301什么是事件解绑01什么是事件解绑在元素绑定事件之后，当在某个时刻不再需要该事件处理时，可以解除所绑定的事件，这就是事件解绑。JQuery1.7以后，提供了统一的off()方法，用于解除由on()、bind()和delegate()方法所绑定的事件。02常见事件解绑1、解绑指定事件off()方法中指定解绑的事件。$('#btn').off('click);02常见事件绑定2、解绑所有事件off()方法中不指定任何参数。$('#btn').off();02常见事件绑定3、解绑事件委托off()方法中指定对应的事件和对应子元素。

$('#btn').off('click','p');03总结事件解绑off()方法01off()方法的3种常用方式02JQuery应用开发——事件冒泡目录CONTENT02如何阻止事件冒泡总结0301什么是事件冒泡01什么是事件冒泡事件传播的两种策略：事件捕获和事件冒泡。事件捕获：事件传播的顺序是最外层元素向触发事件的元素传递。事件冒泡：事件传播顺序是从触发事件元素向最外层元素传递。事件捕获事件冒泡01什么是事件冒泡为了保证跨浏览器的兼容性问题，jQuery中不支持事件捕获，而是在事件冒泡阶段注册事件处理程序，也就是说在jQuery中注册的事件默认拥有事件冒泡的特点。$('span').click(function(){console.log('span元素被单击了');});$('p').click(function(){console.log('p元素被单击了');});$('div').click(function(){console.log('div元素被单击了');});01什么是事件冒泡事件冒泡的事件传播的方向是从触发事件的元素到顶层。01什么是事件冒泡02如何阻止事件冒泡事件冒泡在实际开发中会引起一些问题，比如：单击子元素，由于事件冒泡会向上触发其父元素的单击事件，从而引起一些错误的操作。为此，jQuery提供了两种阻止冒泡的方式：阻止事件冒泡event.stopPropagation()

方法returnfalse语句02如何阻止事件冒泡returnfalse;event.stopPropagation()03总结什么是事件冒泡01如何实现事件冒泡0203如何阻止事件冒泡JQuery应用开发——事件对象目录CONTENT02事件对象的常用属性和方法总结0301什么是事件对象01什么是事件对象注册一个事件，系统就会自动生成一个对象，用来记录这个事件触发时的一些信息（比如：触发事件的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态），这个对象就是事件对象。$('element').on('click',function(event){

//event:事件对象});02事件对象的属性和方法1、event.type用来获取事件类型，比如：点击事件、鼠标移动事件等<div>div父元素<p>p子元素</p></div>$("div").click(function(event){alert(event.type);returnfalse;});02事件对象的属性和方法2、event.pageX/Y鼠标事件中，鼠标相对于页面原点的水平/垂直坐标<div>div父元素<p>p子元素</p></div>$("p").click(function(event){alert(event.pageX+","+event.pageY)returnfalse;});02事件对象的属性和方法3、delegateTarget、currentTarget和target（1）、通过普通方法绑定事件<div>div父元素<p>p子元素</p></div>$("p").click(function(event){console.log('deletateTarget:'+event.delegateTarget);console.log('currentTarget:'+event.currentTarget);console.log('target:'+event.target);returnfalse;});02事件对象的属性和方法（2）、通过事件委托绑定事件<div>div父元素<p>p子元素</p></div>$("div").on('click','p',function(event){console.log('deletateTarget:'+event.delegateTarget);console.log('currentTarget:'+event.currentTarget);console.log('target:'+event.target);});02事件对象的属性和方法（3）、通过事件冒泡绑定事件<div>div父元素<p>p子元素</p></div>$('div').click(function(event){console.log('deletateTarget:'+event.delegateTarget);console.log('currentTarget:'+event.currentTarget);console.log('target:'+event.target);})$('p').click(function(event){console.log('p元素被点击了');})02事件对象的属性和方法4、event.preventDefault()阻止html中一些标签的默认行为，比如a标签的href跳转<ahref="4.8.html">跳转到某一网址</a>$('a').click(function(event){alert("不允许跳转");event.preventDefault();})03总结常用的属性和方法属性/方法描述type事件类型，如果使用一个事件处理函数来处理多个事件，可以使用此种属性获得事件类型，比如clickpageX/Y鼠标事件中，鼠标相对于页面原点的水平/垂直坐标delegateTarget当前调用的jQuery事件处理程序的元素对象currentTarget当前触发事件的DOM对象，等同于thistarget事件源，也叫做事件触发者DOM对象，不一定等同于thisstopPropagation()阻止事件冒泡preventDefault()阻止默认行为，例如a元素的href链接加载、表单提交以及click引起复选框的状态切换JQuery应用开发图片提示01任务导入提出任务目录CONTENT02分析任务03任务实施04总结0501

任务导入

同学们，在学习了j