[jQuery] 事件和动画详解

在页面加载完毕后,浏览器会通过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]);

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/72719d98204230325af06b64e4d7a95a.html