jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2

Posted 2020-07-03 浅岸

第4章 jQuery中的事件和动画

jQuery中的事件

1. 加载DOM

$(document).ready(function(){

  // 编写代码...

});

可以简写成：

$(function(){

  // 编写代码...

});

 

$(document).ready()方法的执行时机是在网页中所有DOM结构绘制完毕后就执行，可能此时DOM元素关联的东西（比如图片）并没有加载完。

$(document).ready()方法能同时编写多个，每次调用$(document).ready()方法都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行。

 

1. 事件绑定

在文档装载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来匹配元素进行特定事件的绑定，bind()方法的调用格式为：

bind( type [, data] , fn);

       bind()方法有3个参数，说明如下：

       第1个参数是事件类型，类型包括：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等，当然也可以是自定义名称。

第2个参数为可选参数，作为event.data属性值传递给事件对象的额外数据对象。

第3个参数则是用来绑定的处理函数。

 

像click、mouseover和mouseout这类事件，在程序中经常会使用到，jQuery为此也提供了一套简写的方法。例：

$("p"). click(function(){

  alert( $(this).text() );

});

 

1. 合成事件

jQuery有两个合成事件——hover()方法和toggle()方法，类似前面的ready()方法，hover()方法和toggle()方法都属于jQuery自定义的方法。

    hover()方法的语法结构为：

hover(enter,leave);

hover方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第1个函数（enter）；当光标移出这个元素时，会触发指定的第2个函数（leave）。

    toggle()方法的语法结构为：

toggle(fn1,fn2,···,fnN);

     toggle()方法用于模拟鼠标连续单击事件。第1次单击元素，触发指定的第1个函数（fn1）；当再次单击同一个元素时，则触发指定的第2个函数（fn2）；如果还有更多函数，则依次触发，直到最后一个。随后的每次单击都重复对这几个函数的轮播调用。

 

1. 事件冒泡

    事件对象

在程序中使用事件对象非常简单，只需要为函数添加一个参数，jQuery代码如下：

$("element"). bind(“click”,function(event){

    //···

});

这样，当单击“element”元素时，事件对象就被创建了。这个事件对象只有事件处理函数能访问到。事件处理函数执行完毕后，事件对象就被销毁。

    停止事件冒泡

停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在jQuery中提供了stopPropagation()方法来停止事件冒泡。

    阻止默认行为

网页中的元素有自己默认的行为，例如，单击超链接后会跳转、单击“提交”按钮后表单会提交，有时需要阻止元素的默认行为。

在jQuery中，提供了preventDefault()方法来阻止元素的默认行为。

如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。这是对在事件上同时调用stopPropagation()方法和preventDefault()方法的一种简写方法。

    jQuery不支持事件捕获，如果读者需要使用事件捕获，请直接使用原生的javascript。

 

1. 事件对象的属性

    event.type的作用是可以获取到事件的类型；

    event. preventDefault()方法的作用是阻止默认的事件行为；

    event.stopPropagation()方法的作用是阻止事件的冒泡；

    event.target的作用是获取到触发事件的元素；

    event.relatedTarget

    event.relatedTarget

在标准DOM中，mouseover和mouseout所发生的元素可以通过event.target来访问，相关元素是通过event.relatedTarget来访问的。

    event.pageX和event.pageY的作用是获取光标相对于页面的x坐标和y坐标。如果页面上有滚动条，则还要加上滚动条的宽度或高度。

    event.which的作用是在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键。

1=鼠标左键；2=鼠标中键；3=鼠标右键

    event.metaKey为键盘事件中获取<ctrl>按键

 

1. 移除事件

在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。

可以使用unbind()方法来移除元素上一下注册的事件，它的语法结构：

       unbind([type],[data]);

第1个参数是事件类型，第2个参数是将要移除的函数，具体说明如下。

（1）如果没有参数，则删除所有绑定的事件。

（2）如果提供了事件类型作为参数，则只删除该类型的绑定事件。

（3）如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除。

 

另外，对于只需要触发一次，随后就要立即解除绑定的情况，jQuery提供了一种简写方法——one()方法。

one()方法可以为元素绑定处理函数。当处理函数触发一次后，立即被删除。即在每个对象上，事件处理函数只会被执行一次。

one()方法的语法结构如下：one( type, [data], fn );

 

1. 模拟事件

在jQuery中，可以使用trigger()方法来完成模拟操作。例：

$(‘#btn’).trigger(“click”);

这样，在用户进入页面后，就触发click事件，而不需要用户去主动单击。

 

trigger不仅可以触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。

trigger(type,[data])方法有两个参数，第1个参数是要触发的事件类型，第2个参数是要传递给事件处理函数的附加数据，以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。

 

trigger()方法触发事件后，会执行浏览器的默认事件。

如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用jQuery中另一个类似的方法——triggerHandler()方法。

 

jQuery中的动画

1. show()方法和hide()方法是jQuery中最基本的动画方法。

在html文档里，为一个元素调用hide()方法，会将该元素的display样式改为“none”。

当把元素隐藏后，可以使用show()方法将元素的display样式设置为先前的显示状态（“block”或“inline”或其他除了“none”之外的值）。

 

show()方法和hide()方法在不带任何参数的情况下，相当于css(“display”,”none/block/inline”)，作用是立即隐藏或显示匹配的元素，不会有任何动画。

如果希望在调用show()方法时，元素慢慢地显示出来，可以为show()方法指定一个速度参数。

参数可以为速度关键字“slow”、“normal”和“fast”（长度分别是600毫秒、400毫秒和200毫秒）。此外，还可以为显示速度指定一个数字。

show()方法和hide()方法会同时修改元素的多个样式属性，即高度、宽度和不透明度。

 

注意：用jQuery做动画效果要求在标准模式下，否则可能会引起动画抖动。

 

1. fadeIn()方法和fadeOut()方法只改变元素的不透明度。

fadeOut()方法会在指定的一段时间内降低元素的不透明度，直至元素完全消失(“display:none”）。fadeIn()方法则相反。

 

1. slideUp()方法和slideDown()方法只会改变元素的高度。

如果一个元素的display属性值为“none”，当调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法方法正好相反，元素将由下到上缩短隐藏。

1. 自定义动画方法animate()

很多情况下，需要对动画有更多的控制，这时需要采取一些高级的自定义动画来解决这些问题。在jQuery中，可以使用animate()方法来自定义动画。其语法结构为：

       animate(params, speed, callback) ; 

参数说明如下 :

（1）params：一个包含样式属性及值的映射，比如{property1:”value1”, property2:”value2”,…}。

（2）speed：速度参数，可选。

（3）callback：在动画完成时执行的函数，可选。

 

       注意：callback回调函数适用于jQuery所有的动画效果方法，例如slideDown()方法的回调函数： 

       $(”#element”).slideDown(”normal”, function(){

              //在效果完成后做其他的事情

       });

 

1. 停止动画和判断是否处于动画状态

（1）停止元素的动画

很多时候需要停止匹配元素正在进行的动画，需要使用stop()方法。stop()方法的语法结构为：stop([clearQueue],[gotoEnd]);

参数clearQueue和gotoEnd都是可选的参数，为boolean值（true或false）。clearQueue代表是否要清空未执行完的动画队列；gotoEnd代表是否直接将正在执行的动画跳转到末状态，通常用于后一个动画需要基于前一个动画的末状态的情况。

如果直接使用stop()方法，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画。

（2）判断元素是否处于动画状态

       在使用animate()方法的时候，要避免动画积累而导致的动画与用户的行为不一致。

当用户快速在某个元素上执行animate()动画时，就会出现动画累计。解决方法是判断元素是否处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。代码如下：

if( ! $(element).is(“:animated”)){//判断元素是否处于动画状态

       //如果当前没有进行动画，则添加新动画

}

（3）延迟动画

在动画执行的过程中，如果想对动画进行延迟操作，那么可以使用delay()方法。

 

1. 其他动画方法

jQuery中还有4个专门用于交互的动画方法。

    toggle(speed,[callback])方法可以切换元素的可见状态。

    slideToggle(speed,[easing],[callback])方法通过高度变化来切换匹配元素的可见性。

    fadeTo(speed,opacity,[callback])方法可以把元素的不透明度以渐进方式调整到指定的值。

    fodeToggle(speed,[easing],[callback])方法通过不透明度变化来切换匹配元素的可见性。

 

1. 动画队列

（1）一组元素上的动画效果

    当在一个animate()方法中应用多个属性时，动画是同时发生的。

    当以链式的写法应用动画方法时，动画是按照顺序发生的（除非queue选项值为false）。

（2）多组元素上的动画效果

    默认情况下，动画都是同时发生的。

    当以回调的形式应用动画方式时（包括动画的回调函数和queue()方法的回调函数），动画是按照回调顺序发生的。

 

另外，在动画方法中，要注意其他非动画方法会插队，例如css()方法要使非动画方法也按照顺序执行，需要把这些方法写在动画方法的回调函数中或者queue()方法中。