[jQuery] 事件和动画详解

1. 事件

 1.1 加载DOM

在页面加载完毕后，浏览器会通过JavaScript为DOM元素添加事件。在JavaScript代码中，通常使用window.onload方法，而在jQuery中，使用的是$(document).ready()方法。$(document).ready()方法和window.onload方法有相似的功能，但是在执行时机方面是有区别的。window.onload方法是在网页中所有的元素完全加载到浏览器后才执行，而$(document).ready()方法注册的事件处理程序，在DOM完成就绪时就可以被调用。

由于在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。要解决这个问题，可以使用jQuery中另一个关于页面加载的方法load()方法。load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象，则会在所有内容加载完毕后触发，例如：

$(window).load(function(){
});

每次调用$(document).ready()方法都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行。它也可以简写为：

$(function(){
});

另外，$(document)也可以简写为$()，例如：

$().ready(function(){
}); 

1.2 事件绑定

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

bind(type[,data],fn);

第一个参数是事件类型，包括：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。

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

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

例如：

$("#mydiv").bind("click",function(){
 $(this).next("div.content").show();
});

与ready()方法一样，bind()方法也可以多次调用。像click、mouseover和mouseout这类事件，在程序中经常用到，jQuery为此也提供了一套简写方法，例如：

$("#mydiv").mouseover(function(){
 $(this).next("div.content").show();
});

1.3 合成事件

jQuery有两个合成事件：hover()方法和toggle()方法。hover()方法的语法结构为：

hover(enter,leave);

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

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

toggle()方法用于模拟鼠标连续单击事件，第一次单击元素，触发指定的第一个函数，当再次单击同一个元素时，则触发指定的第2个函数，以此类推，直到最后一个。

 1.4 事件冒泡

在页面上可以有多个事件，也可以多个元素响应同一个事件。由于IE-DOM和标准DOM实现事件对象的方式不同，在不同浏览器中获取事件对象比较困难。jQuery进行了相应的扩展和封装，从而使在任何浏览器中都能轻松获取事件对象，例如：

$("element").bind("click",function(event){
});

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

$("span").bind("click",function(event){
 var txt = $("#msg").html() + "<p>click!</p>";
 $("#msg").html(txt);
 event.stopPropagation();
});

网页中的元素有自己默认的行为，例如单击超链接后会跳转等。在jQuery中，提供了preventDefault()方法来阻止元素的默认行为，例如：

$("#button").bind("click",function(event){
 var txt = $("#msg").html() + "<p>click!</p>";
 $("#msg").html(txt);
 event.preventDefault();
});

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

 1.5 事件对象的属性

jQuery在遵循W3C规范的情况下，对事件对象的常用属性进行了封装，使事件处理在各浏览器下都可以正常运行而不需要进行浏览器类型判断。常用的方法如下：

1) event.type(): 获取到事件的类型。

2) event.preventDefault(): 阻止默认的事件行为。

3) event.stopPropagation(): 阻止事件的冒泡。

4) event.target(): 获取到触发事件的元素。

5) event.relatedTarget(): 获取事件发生的相关元素。

6) event.pageX()/event.pageY(): 获取到光标相对于页面的x坐标和y坐标。

7) event.which(): 在鼠标单击事件中获取到鼠标的左、中、右键。

8) event.metaKey(): 键盘事件中获取<ctrl>键。

9) event.originalEvent(): 指向原始的事件对象。

 1.6 移除事件

unbind()方法可以用于删除元素的事件，语法结构如下：

unbind([type][,data]);

如果没有参数，则删除所有绑定的事件。如果提供了事件类型，则只删除该类型的绑定事件。如果把在绑定时传递的处理函数作为第二个参娄和，则只有这个特定事件处理函数才会被删除，例如：

$("#delAll").click()(
 $("#btn").unbind("click");
);

one()方法的结构与bind()方法类似，使用方法也与bind()方法相，语法结构如下：

one(type[,data],fn);

使用one()方法为元素帮定事件后，只在第一次触发时执行，之后毫无作用。

 1.7 模拟操作

有时需要通过模拟用户操作，来达到单击效果，可以使用trigger()方法完成，例如：

$("#btn").trigger("click");

也可以直接用简化写法click()来达到同样的效果。

trigger(type[,data])方法有两个参数，第二个参数是要传递给事件处理函数的附加数据，以数组形式传递。

trigger()方法触发事件后，会执行浏览器默认操作，例如：

$("input").trigger("focus");

以上代码不仅会触发focus事件，也会使input元素本身得到焦点，如果不想执行浏览器默认操作，可以使用另一个类似的方法triggerHandler()方法。

 2. 动画

 2.1 show()方法和hide()方法

show()方法和hide()方法是jQuery中最基本的动画方法。为一个元素调用hide()方法，会将该元素的display样式改为"none"，例如：

$("#mydiv").hide();

当把元素隐藏后，可以使用show()方法将元素的display样式设置为先前的显示状态，例如：

$("#mydiv").show();

show()方法可以指定一个速度参数，例如，指定一个速度关键字"slow"，例如：

$("#mydiv").show("slow");

运行该代码后，元素将在600毫秒内慢慢显示，其他的速度关键字还有"normal"和"fast"，不仅如此，还可以为显示速度指定一个数字，单位是毫秒。

 2.2 fadeIn()方法和fadeOut()方法

与show()方法不同的时，fadeIn()和fadeOut()方法只改变元素的不透明度。fadeOut()方法会在指定时间内降低元素的不透明度，直到元素完全消失。fadeIn()方法则相反，例如：

$("#mydiv").fadeOut();

2.3 slideUp()方法和slideDown()方法

slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的display属性值为"none"，当调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反，元素将由下到上缩短隐藏，例如：

$("#mydiv").slideDown();

2.4 自定义动画方法animate()

如果需要采取一些高级的自定义动画来解决更多控制的问题，可以使用animate()方法来自定义动画，语法结构为：

animate(params,speed,callback);

params包含样式属性及值的映射，比如{property1:"value1",property2:"value2",...}，speed是可选的速度参数，callback是在动画完成时执行的函数，例如：

$("#mydiv").animate({left:"+=500px"},300);

"+="符号或"-="符号即表示在当前位置累加或者累减。如果需要同时执行多个动画，可以写如下代码：

$("#mydiv").animate({left:"500px",height:"200px"},3000);

如果只想按顺序执行动画，只需把代码拆开即可，例如：

$("#mydiv").animate({left:"500px"},3000);
$("#mydiv").animate({height:"200px"},3000);

或者：

$("#mydiv").animate({left:"500px"},3000).animate({height:"200px"},3000);

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

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

stop([clearQueue][,gotoEnd]);

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

在使用animate()方法的时候，要避免动画积累而导致的动画与用户的行为不一致，解决方法是判断元素是否正处于动画状态，例如：

if(!$("#mydiv").is("animated")){
}

2.6 其他动画方法

jQuery中还有3个专门用于交互的动画方法：toggle(speed,[callback])，slideToggle(speed,[callback]),fadeTo(speed,opacity,[callback])。

toggle()方法可以切换元素的可见状态，例如：

$("#mydiv").click(function(){
 $(this).next("div.content").toggle();
});

slideToggle()方法通过高度变化来切换匹配元素的可见性，例如：

$("#mydiv").click(function(){
 $(this).next("div.content").slideToggle();
});

fadeTo()方法可以把元素的不透明度以渐进方式调整到指定的值，例如：

$("#mydiv").click(function(){
 $(this).next("div.content").fadeTo(600,0.2);
});

总结

以上所述是小编给大家介绍的[jQuery] 事件和动画详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对亿速云网站的支持！