使用jQuery快速高效制作网页交互特效——07 第七章 jQuery中的事件与动画
1、 jQuery中的事件:
●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 |
●jQuery事件是对JavaScript事件的封装,常用事件分类 ●基础事件
●复合事件
|
2、基础事件:
●语法: 时间名=”函数名()”; 或: DOM 对象.事件名=函数 |
|||||||||||||||||||||||||||||
●载入事件:在jQuery中,常用的window事件有文档载入事件,它对应的方法是ready()。 |
|||||||||||||||||||||||||||||
●鼠标事件:当用户在文档上移动或单击鼠标而产生的事件。
★eg:$(".nav-ul a").mouseover(function(){ //当鼠标移入菜单时 $(this).css("background-color","#f01e28"); }); $(".nav-ul a").mouseout(function(){ //当鼠标移出菜单时 $(this).css("background-color","#ff2832"); }); ◆鼠标事件方法的区别:
|
|||||||||||||||||||||||||||||
●键盘事件:键盘事件是指当键盘聚焦到Web浏览器时,用户每次按下或释放键盘上的按键时都会产生事件。常用的键盘事件有keydown、keyup、keypress。
◆eg:$("[type=password]").keyup(function () { //当键盘释放时 $("#events").append("keyup"); }).keydown(function (e) { //当键盘按下时 $("#events").append("keydown"); }).keypress(function () { //向密码框输入字符时 $("#events").append("keypress"); }); $(document).keydown(function (event) { if (event.keyCode == "13") { //按下回车键时 alert("确认要提交么?"); } }); |
|||||||||||||||||||||||||||||
●浏览器事件:在浏览网页时,大家经常会调整浏览器窗口的大小。这些都是通过jQuery中的resize()方法触发resize事件,进而处理相关的函数,来完成页面的一些特效。 语法: $(selector).resize(); |
3、 绑定事件与移除事件:
●绑定事件:在jQuery中,如果需要为匹配的元素同时绑定一个或多个事件,则可以使用bind()方法。 语法: bind(type,[data],fn);
★除了bind()方法之外,还有on()、live()和one()等事件绑定方法; ★上面这种已经过时,建议使用on: On(type,[data],fn); |
|||||||||||||
◆绑定单个事件: Eg:使用绑定实现鼠标移至“我的当当”显示二级菜单 $(document).ready(function(){ $(".on").bind("mouseover",function(){ $(".topDown").show(); }); }); 效果:
|
◆绑定多个事件: Eg:使用绑定多个事件实现“我的当当” 二级菜单的显示和隐藏 $(".top-m .on").bind({ mouseover:function(){ //为mouseover绑定方法 $(".topDown").show(); }, mouseout:function(){ //为mouseout绑定方法 $(".topDown").hide(); } }); |
||||||||||||
●移除事件:当事件执行完了,需要把绑定的事件通过一定的方法取消。在jQuery中提供了移除事件的方法,同样可以移除单个或多个事件,可以使用unbind()方法。 语法: unbind([type],[fn]) //type:事件类型,主要包括:blur、focus、click、mouseout等基础事件,此外,还可以是自定义事件; //fn:处理函数,用来解除绑定的处理函数; // Undind()方法有两个参数,这两个参数不是必须的。当unbind()不带参数时,表示移除所绑定的全部事件。 |
4、 复合事件:
●在jQuery中有两个复合事件方法-hover()和toggle(),这两个方法与ready()类似,都是jQuery自定义的方法。 |
●hover()方法:在jQuery中,hover()方法用于模拟鼠标移入和移出事件。 当鼠标移入时,会触发指定的第一个函数(enter); 当鼠标移除这个函数时,会触发指定的第二个函数(leave), 该方法相当于mouseenter和mouseleave事件的组合。 语法: hover(enter,leave); eg:$(".top-m .on").hover(function(){ $(".topDown").show(); }, function(){ $(".topDown").hide(); } ); |
●toggle()方法:在jQuery中,toggle()方法分为带参数和不带参数。 ◆带参数的方法用于模拟鼠标连续click事件。第一次单击元素,触发指定的第一个函数,再次单击则触发指定的第二个函数,如果有更多函数,则依次触发,直到最后一个。随后的单击都重复对几个函数的轮番调用。 语法: toggle(fn1,fn2…..fnN); eg:$("input").toggle( function(){$("body").css("background","#ff0000");}, function(){$("body").css("background","#00ff00");}, function(){$("body").css("background","#0000ff");} ) ◆toggle()不带参数时,与show()和hide()方法的作用一样,切换元素的可见状态。如果是可见的,则切换为隐藏状态;如果是隐藏的,则切换为可见状态。 语法: toggle(); eg:$("input").click(function(){ $("p").toggle(); }) ◆与jQuery中的toggle()方法一样,toggleClass()可以对样式进行切换,实现事件触发时某元素在“加载某个事件”和“移除某个事件”之间切换。 语法: toggleClass(className); eg:$("input").click(function(){ $("p").toggleClass("red"); }) |
●toggle( )和toggleClass( )总结 1、 toggle( fn1,fn2...)实现单击事件的切换,无须额外绑定click事件 2、toggle( )实现事件触发对象在显示和隐藏状态之间切换 3、toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换 |
5、 jQuery中的动画:
jQuery提供了很多动画效果 1、 控制元素显示与隐藏 2、改变元素的透明度 3、改变元素高度 4、自定义动画 |
||||||
●控制元素的显示:在jQuery中,可以使用show()方法控制元素的显示,除此之外,它还能定义显示时的效果,如显示速度。 语法: $(selector).show([speed],[callback]);
|
||||||
●控制元素的隐藏:用法与show()方法类似。 语法: $(selector).hide([speed],[callback]); |
||||||
●改变元素的透明度: 1.控制元素淡入:在jQuery中,如果元素是隐藏的,则可以使用fadeIn()方法控制元素淡入,它与show()方法相同,可以定义淡入时的效果,如显示速度 语法: $(selector).fadeIn([speed],[callback]);
2.控制元素淡出 语法: $(selector).fadeOut([speed],[callback]); |
||||||
●改变元素的高度:在jQuery中,用于改变元素高度的方法是slideUp()和slideDown()。若元素中的display属性值为none,当调用slideDown()方法时,这个元素会从上向下延伸显示,而slideUp()方法正好相反,元素下到上缩短直至隐藏。 语法: $(selector).slideUp([speed],[callback]); $(selector).slideDown([speed],[callback]); |
||||||
JQuery中的所有动画效果,都可以设置三种速度参数,即slow、normal、fast(三者对应的时间分别为0.6秒,0.4秒,0.2秒); 当使用关键字作为速度的参数时,需要使用双引号引起来,如:fadeIn(“slow”), 而使用时间数值作为速度参数时,则不需要使用双引号,如:fadeIn(500),需要注意的是,当使用数值作为参数时,单位为毫秒而不是秒; |
||||||
●自定义动画:在jQuery中,可以创建自定义动画,实现各种比较复杂的动画。 语法: $(selector).animate({params},[speed],[callback]); //params:必选项目,定义形成动画的CSS属性。 //speed:可选,规定效果时长,取值:毫秒、fast、slow; //callback:选项,滑动完成后执行的函数名称。 |
6、 事件冒泡:
附加: ●事件冒泡:当一个父元素的子元素有与父元素相同的事件时,那么父元素的事件执行时,子元素的事件也会执行,那么父元素的一次click事件相当于执行了2次。
◆阻止冒泡事件 Eg:下面的例子,BODY元素下有DIV元素,DIV元素下有SPAN元素,分别将三种元素都注册click事件。 那么,click事件会按照DOM的层次结构,像水泡一样不断向上直到顶端,所以称之为事件冒泡。 <body><div><span>我是****</span></div></body> $("span").bind("click", function(){ alert('span click'); }); $("div").bind("click", function(){ alert('div click'); }); $("body").bind("click", function(){ alert('body click'); }); 解决这个问题的办法是:在SPAN执行完click事件后,停止事件冒泡。 $("span").bind("click", function(event){ alert('span click'); event.stopPropagation(); //停止冒泡 }); |
||
js之事件冒泡和事件捕获: (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window (2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。 (3)DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。 DOM事件模型最独特的性质是,文本节点也触发事件(在IE中不会)。 支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法,基中第3个参数useCapture是一个Boolean值,用来设置事件是在事件捕获时执行,还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法,此方法没有相关设置,不过IE的事件模型默认是在事件冒泡时执行的,也就是在useCapture等于false的时候执行,所以把在处理事件时把useCapture设置为false是比较安全,也实现兼容浏览器的效果。 事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。 Netscape中,div先触发,这就叫做事件捕获。 Microsoft中,p先触发,这就叫做事件冒泡。 两种事件处理顺序刚好相反。IE只支持事件冒泡,Mozilla, Opera 7 和 Konqueror两种都支持,旧版本的Opera's 和 iCab两种都不支持 。 事件捕获 事件冒泡 W3C模型 程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。 ele.addEventListener('click',doSomething2,true) true=捕获 false=冒泡 传统绑定事件方式 ele.onclick = doSomething2 IE浏览器 ele.attachEvent("onclick", doSomething2); 附:事件冒泡(的过程):事件从发生的目标(event.srcElement||event.target)开始,沿着文档逐层向上冒泡,到document为止。 事件的传播是可以阻止的: |
||
Eg: <!DOCTYPE html> |
||
理解: 他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。相反的,事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡,意思就是到我为止,我的爹和祖宗的事件就不要触发了。 这是HTML结构
现在我们给它们绑定上事件 document.getElementById("parent").addEventListener("click",function(e){ alert("parent事件被触发,"+this.id); }) document.getElementById("child").addEventListener("click",function(e){ alert("child事件被触发,"+this.id) }) 结果: child事件被触发,child parent事件被触发,parent 结论:先child,然后parent。事件的触发顺序自内向外,这就是事件冒泡。 现在改变第三个参数的值为true document.getElementById("parent").addEventListener("click",function(e){ alert("parent事件被触发,"+e.target.id); },true) document.getElementById("child").addEventListener("click",function(e){ alert("child事件被触发,"+e.target.id) },true) 结果: parent事件被触发,parent child事件被触发,child 结论:先parent,然后child。事件触发顺序变更为自外向内,这就是事件捕获。 |