锋利的jquery-事件和动画

1 注册事件的触发时机

在jquery中，$(window).load(function(){})

注册在window下的事件等待页面所有资源加载完成（包括dome树的加载和图片视频的资源的加载）

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

注册在document下的事件等待DOM树加载完成立即执行，不需要等待其他资源的加载

注册在元素上的事件，则会再元素内容加载完成后触发。

2 多次使用

window.onload=function(){}事件只可以挂载一次，挂载多次事件，则会后面一次事件覆盖前面一次事件

$(document).ready(function(){})事件可以多次挂载

3 合成事件（hover()）

.hover(enter,leave);

4 事件对象

由事件源开始先祖先元素冒泡，依次触发祖先元素的该相同事件；

①jquery事件对象；event

②jquery事件源；event.target;

jquery对其进行了封装，避免了各浏览器的兼容性

③js事件源：e.srcElement;(IE)

e.target；

e.currentTarget;④停止事件冒泡

e.stopPropagation()

⑤阻止事件的默认行为

e.preventDefault()

⑥jquery中同时停止冒泡和阻止默认行为

return flase

⑦事件对象的类型；

event.type;

⑧event.relatedTarget相当于IE下的fromElement/toElement

常用于onmouseout和onmouseover事件中，相当于，event.target;

jquery对事件做了封装；能兼容各种浏览器

⑨取得光标坐标

event.pageX/event.pageY获取页面光标相对于页面的X、Y坐标；

jquery封装了IE下的event.x/event.y和FF下的event.PageX/event.PageY;和页面有滚动条时的情况；能兼容各种浏览器；

鼠标事件

A：event.which

在鼠标单击和按下键盘时获取键值。

B : event.metaKey/event.shiftKey/event.altKey

metaKey为jquery封装的ctrl按键

 

5 移除事件

①绑定事件

$("#id").bind("click",function(){}).bind("click",function()){}

使用此方法可以连续绑定多个相同事件

②移除事件

$("#id").unbind("click");使用该方法可以移除该id上绑定的所有click事件；如果没有参数，则移除该id上所有事件；

③绑定带有名称的事件函数；

$("#id").bind("click",myFun=function(){})

④移除某个元素上的某类事件的某一个事件函数；

$("#id").unbind("click",myFun)

⑤对于只触发一次就解除绑定的事件，使用one方法代替bing方法

6模拟操作

① 在某一个函数执行结束后，模拟用户的操作；

$(function(){

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

})

以上为在DOM树加载完成后模拟用操作了btn元素的click事件

②触发自定义事件

A：自定义事件；

$("#btn").bind("myClick",function(){});

B : 触发自定义事件

$("#btn").trigger("myClick")

C : 触发事件后不执行默认行为

$("#btn").triggerHandler("focus");

D :为元素绑定多个事件

$("div").bind("mouseover mouseout",function(){})

在鼠标移入移除时都会触发该事件

7 自定义动画animate()

show(),hide();会修改元素的宽高，透明度；

fadeOut(),fadeIn()会修改元素的不透明度

slideDown(),slideUp()会修改元素的高度

除了这些还可以用animate()方法自定义动画；

可以通过对animate的宽高，位置（left/right）,透明度（opacity）（0~1）的改变 来设置动画，还可以通过链式调用对动画进行排队；