jQuery 理解事件和动画

jQuery中的事件和动画

JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。当文档或者它的某些元素发生某些变化或操作时，浏览器会自动生成一个事件，例如，当浏览器装载完一个文档后会生成事件。

jQuery中的事件

加载DOM

浏览器加载文档时，页面加载完成后，浏览器会通过JavaScript为DOM元素添加事件。

JavaScript中的window.onload方法是在网页中所有元素（包括和元素所关联的文件）完全加载到浏览器后才执行。

jQuery中的$(document).ready()方法注册的事件处理程序，在DOM完全就绪时就被调用，此时和元素关联的事件不一定已经加载完成。

jQuery中另一个关于页面加载的方法，load()方法，load()会绑定一个事件处理函数，如果处理函数绑定给window对象，则会在所有内容加载完毕触发（包括窗口、框架、对象、图像等），如果处理函数绑定在元素上，则会在元素内容加载完毕后触发。例如：

$(window).onload(function(){
//编写代码
})
//等价于
window.onload = function(){
//编写代码
}

JavaScript的window.onload方法只能保存一次对函数的引用，它会自动用后面的函数覆盖前面的函数。jQuery的(document).ready()方法可以保存多个函数的引用，这些函数会根据注册的顺序依次执行。(document).ready()可以简写成$();

事件绑定

通过使用bind()方法来对匹配元素进行特定事件的绑定。调用格式：

bind(type,data,fn)

第一个参数是事件类型，也可以是自定义事件；第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象；第三个参数则是用来绑定事件的处理函数。

同时还可以将绑定事件简写：

$("p").bind("mouseover",fn)
//等价于
$("p").mouseover(fn)

合成事件

jQuery中有两个合成事件，hover()和toggle()。

hover()方法的语法结构:

hover(enter,leave);

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

toggle()方法的语法结构:

toggle(fn1,fn2...fnN);

toggle()方法用于模拟鼠标连续单击事件，第一次单击元素，触发指定的第一个函数（fn1）；当再一次单击同一个元素时，则触发指定的第二个函数（fn2）；如果有更多函数，则依次触发，直到最后一个。

toggle()方法还有另外一个作用，切换元素的可见状态，如果元素是可见的，单击切换后则为隐藏；如果元素是隐藏的，单击切换后则为可见的。

事件冒泡

事件冒泡：事件会按照DOM结构像水泡一样不断向上至顶端。

事件冒泡引发的问题：事件冒泡会使得触发元素上的事件时，其祖先元素上的事件一同被触发，因此有必要对事件的作用范围进行限制。

停止事件冒泡，使用stopPropagation()方法，例如：

$("span").bind("click",function(event){        //event:事件对象
//执行的操作
event.stopPropagation();                   //停止事件冒泡
})

阻止默认行为，网页中的元素都有默认的行为，例如单击超链接后会跳转，单击提交按钮后表单会提交，有时需要阻止元素的默认行为，使用preventDefault()来阻止默认行为。

如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。例如：

event.stopPropagation();
event.preventDefault();
//改写成
return false；

jQuery不支持事件捕获。

事件对象的属性

event.type，获取到事件的类型

event.stopPropagation，阻止事件的冒泡

event.preventDefault()，阻止事件默认行为

event.target，获取到触发事件的元素

event.relatedTarget，只用在mouseover和mouseout事件中，mouseover中relatedTarget指向鼠标来自的元素，而mouseout中的relatedTarget指向的是鼠标去向的那个元素

event.pageX和event.pageY，获取到光标相对于页面的x坐标和y坐标

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

event.metaKey，键盘事件中获取键。

移除事件

unbind()方法的语法结构：

unbind(type,fn)

第一个参数是事件类型，第二个参数是将要移除的函数。如果没有参数，则删除所有绑定的事件；如果提供了事件类型作为参数，则只删除该类型的绑定事件；如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除。

对于只需要触发一次，就立即接触绑定的情况，jQuery提供了一种简写方法，one()方法。其语法结构如下：

one(type,data,fn);

jQuery中的动画

show()和hide()

在HTML文档里，为一个元素调用hide()方法时，会先记住内容的display属性的值，然后将该元素的display样式设置为none。例如：

$("element").hide()；
//等价于
$("element").css("display","none");

show()方法将元素的display样式设置为先前的显示状态：

$("element").show()；

也可以为show()和hide()指定一个速度参数，例如：

$("element").show("slow");              //速度关键字：slow(0.6秒)、normal（0.4秒）、fast（0.2秒）

$("element").hide(1000);              //1秒钟内隐藏

fadeIn()和fadeOut()

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

fadeOut()会在指定的一段时间内降低元素的不透明度，直到元素完全消失（”

display:none

“），fadeOut()则相反。

slideUp()和slideDown()

slideUp()和slideDown()只改变元素的高度

如果一个元素的display属性值为none，当调用slideDown()方法时，这个元素将从上至下的延伸；当调用slideUp()方法时，元素将从下到上的缩短隐藏。

自定义动画方法animate()

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

animate(params,speed,callback);

params：一个包含样式属性及值的映射

speed：速度参数，可选

callback：在动画完成时执行的参数，可选

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

如果需要在某处停止动画，需要使用stop()方法，stop()方法的语法结构如下：

stop([clearQueue],[gotoEnd]);

参数clearQueue和gotoEnd都是可选的参数，为Boolean值。clearQueue代表是否要清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态。

判断元素是否处于动画状态：

if(!$("element").is(":animated")){
//如果当前没有进行动画，则添加新动画
}

如果想对动画进行延迟操作，可以使用delay()方法，该方法接收一个参数，即延迟的时间

其他动画方法

toggle()，切换元素的可见状态

slideToggle()，通过高度变化来切换元素的可见性，这个动画效果只调整元素的高度

fadeTo()，把元素的不透明度以渐进的方式调整到指定的值，这个方法只调整元素的不透明度，即元素的宽度和高度不会发生变化。

fadeToggle()，通过不透明度的变化来切换元素的可见性。