[jQuery] 事件和动画详解

2020-05-17 06:27:48易采站长站整理


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]);

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