使用jQuery快速高效制作网页交互特效——07 第七章 jQuery中的事件与动画

Posted 2020-12-28 hqing

1、 jQuery中的事件：

●和WinForm一样，在网页中的交互也是需要事件来实现的，例如tab切换效果，可以通过鼠标单击事件来实现

●jQuery事件是对JavaScript事件的封装，常用事件分类    ●基础事件 鼠标事件 键盘事件 window事件 表单事件   ●复合事件 鼠标光标悬停 鼠标连续点击

2、基础事件：

●语法： 　　　　时间名=”函数名()”; 　　   或： 　　　　DOM 对象.事件名=函数

●载入事件：在jQuery中，常用的window事件有文档载入事件，它对应的方法是ready()。

●鼠标事件：当用户在文档上移动或单击鼠标而产生的事件。 方法 描述 执行时机 click( ) 触发或将函数绑定到指定元素的click事件 单击鼠标时 mouseover( ) 触发或将函数绑定到指定元素的mouseover事件 鼠标指针移过时 mouseout( ) 触发或将函数绑定到指定元素的mouseout事件 鼠标指针移出时 mouseenter( ) 触发或将函数绑定到指定元素的mouseenter事件 鼠标指针进入时 mouseleave( ) 触发或将函数绑定到指定元素的mouseleave事件 鼠标指针离开时 　　　　　　　　　　　　　　　　★eg：$(".nav-ul a").mouseover(function(){       //当鼠标移入菜单时                    　　　　　　　　　　　　　　　　 $(this).css("background-color","#f01e28"); 　　　　　　　　　　　　　　　　　　　　}); 　　　　　　　　　　　　　　　　　　　$(".nav-ul a").mouseout(function(){        //当鼠标移出菜单时                  　　　　　　　　　　　　　　　　 $(this).css("background-color","#ff2832"); 　　　　　　　　　　　　　　　　　　　　}); 　　　　　　　　　　　　　　◆鼠标事件方法的区别： 方法 相同点 不同点 mouseover( ) 鼠标进入被选元素时会触发 鼠标在其被选元素的子元素上来回进入时： 触发mouseover( ) 不触发mouseenter mouseenter( ) mouseout( ) 鼠标离开被选元素时会触发 鼠标在其被选元素的子元素上来回离开时： 触发mouseout 不触发mouseleave mouseleave( )

●键盘事件：键盘事件是指当键盘聚焦到Web浏览器时，用户每次按下或释放键盘上的按键时都会产生事件。常用的键盘事件有keydown、keyup、keypress。 方法 描述 执行时机 keydown( ) 触发或将函数绑定到指定元素的keydown事件 按下键盘时 keyup( ) 触发或将函数绑定到指定元素的keyup事件 释放按键时 keypress( ) 触发或将函数绑定到指定元素的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);              参数类型 参数含义 描述 type 事件类型 主要包扩click、mouseover等基础事件，还可以自定义事件 [data] 可选参数 作为even.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]); 参数 描述 speed 可选。规定元素从隐藏到完全可见的速度，默认为“0” 可能值：毫秒（如1000）、slow、normal、fast 在设定速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变高度、宽度，外边界、内边界和透明度； callback 可选项，show()函数执行完后，要执行的函数

●控制元素的隐藏：用法与show()方法类似。 　　　　语法： 　　　　　　　$(selector).hide([speed],[callback]);

●改变元素的透明度： 　　　1.控制元素淡入：在jQuery中，如果元素是隐藏的，则可以使用fadeIn()方法控制元素淡入，它与show()方法相同，可以定义淡入时的效果，如显示速度   　　　　     语法： 　　　　　　　　$(selector).fadeIn([speed],[callback]); 参数 描述 speed 可选。规定元素从隐藏到完全可见的速度，默认为“0” 可能值：毫秒（如1000）、slow、normal、fast 在设定速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变透明度，给视觉以淡入的效果； callback 可选项，fadeIn ()函数执行完后，要执行的函数，除非设置了speed参数，否则不能设置该参数； 　　　　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)。 事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。 假设一个元素div，它有一个下级元素p。 <div> 　　<p>元素</p> </div> 这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？   两种模型 以前，Netscape和Microsoft是不同的实现方式。 Netscape中，div先触发，这就叫做事件捕获。 Microsoft中，p先触发，这就叫做事件冒泡。 两种事件处理顺序刚好相反。IE只支持事件冒泡，Mozilla, Opera 7 和 Konqueror两种都支持，旧版本的Opera‘s 和 iCab两种都不支持 。 事件捕获 当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。 事件冒泡 当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。 W3C模型 W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。 程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。 ele.addEventListener(‘click‘,doSomething2,true) true=捕获 false=冒泡 传统绑定事件方式 在一个支持W3C DOM的浏览器中，像这样一般的绑定事件方式，是采用的事件冒泡方式。 ele.onclick = doSomething2 IE浏览器 如上面所说，IE只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数attachEvent。 ele.attachEvent("onclick", doSomething2); 附：事件冒泡（的过程）：事件从发生的目标（event.srcElement||event.target）开始，沿着文档逐层向上冒泡，到document为止。 事件的传播是可以阻止的： ? 在W3c中，使用stopPropagation（）方法 ? 在IE下设置cancelBubble = true； 在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了~ 3.阻止事件的默认行为，例如click <a>后的跳转~ ? 在W3c中，使用preventDefault（）方法； ? 在IE下设置window.event.returnValue = false;

Eg： <!DOCTYPE html> <html lang="en" onclick="alert(‘html‘)"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>     <title>Document</title> </head> <body onclick="alert(‘body‘)"> <!--html--> <div style="width:400px; height:400px; background:red" onclick="alert(this.style.background)">     <div id="div2" style="width:300px; height:300px; background:palevioletred" >         <div style="width:200px; height:200px; background:yellow" onclick="alert(this.style.background)">             <div id="div1" style="width:100px; height:100px; background:palegreen">                 <a id="aaa" href="http://www.baidu.com">aaa</a>             </div>         </div>     </div> </div> <script>     //此jquery既阻止默认行为又停止冒泡     // $("#div1").on(‘click‘,function(){     //     return false;     // });     window.onload = function () {         var oDiv1 = document.getElementById(‘div1‘);         var oDiv2 = document.getElementById(‘div2‘);         oDiv1.onclick = function (ev){             var oEvent = ev || event;             alert("this is div1");             //js阻止事件冒泡             //oEvent.cancelBubble = true;             //oEvent.stopPropagation();             //js阻止链接默认行为，没有停止冒泡             //oEvent.preventDefault();             //return false;         }         oDiv2.onclick = function (ev){             var oEvent = ev || event;             alert("this is div2");             oEvent.cancelBubble = true;         }     } </script> </body> </html>

理解： 他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。 这是HTML结构   <div id="parent"> 　　<div id="child" class="child"></div> </div> 现在我们给它们绑定上事件             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。事件触发顺序变更为自外向内，这就是事件捕获。