jquery学习第十一番 事件和动画

最重要的事件

$(document).ready(function(){});  DOM就绪就执行

可以同时使用$(document).ready()可以使用多次，执行会是顺序追加，不会起冲突。

它的两种简写方式 $(function(){})    $().ready(function(){})

 

事件绑定  .bind(type[,data],fn);

type 事件类型

data  可选，传递给事件对象的额外数据

fn  回调函数,可带参数event

 

常用的直接的简单绑定事件

.click()

.mouseover()

.mouseout()

 

合成事件

hover()   toggle()

 

.hover(entry-fn,leave-fn);     鼠标掠过事件

 

.toggle(fn1,fn2, ... ,fnX);       鼠标连续点击事件，依次执行fn1,fn2直到fnX

 

事件冒泡及其引发的一些问题

阻止事件冒泡   event.stopPropagation();

阻止事件的默认执行 event.preventDefault()

简写 return false 将会同时阻止 事件冒泡和事件的默认行为

事件源 event.target()

event.relatedTarget()事件相关的元素，如mouseOver就涉及了两个元素

event.pageX()  光标相对于页面的位置

event.pageY()

event.which   返回int,1为左键，2为中键，3为右键

event.metaKey()  针对ctrl 键

event.originalEvent()  指向原始事件对象

 

移除事件绑定

.unbind("click")

.unbind()

.unbind([type][,fn])

 

模拟触发事件

$('#button').trigger("click")   由我们自己去触发生成一个事件

$('#button').click()

 

.trigger(type[,data])      data是事件附加的信息参数，多个信息可以是个数组

 

.bind("myEvent",function(e,mes1,mes2){});

.trigger("myEvent",["xxx","yyy"]);

.triggerHandler("click")   只会触发绑定的函数，不会触发默认的执行行为

绑定多个事件  .bind("mouseover mouseout",function(){})   绑定了两个 事件类型

 

添加事件命名空间便于管理

.bind("click.plugin",function(){})

.bind("mouseover.plugin",function(){})

.bind("mouseover",function(){})

.unbind(".plugin")   会将plugin命名空间下的事件即第一个和第二个移除，而不影响第三个绑定

 

相同事件名称，不同命名空间执行方法

如果只单机button将只触发click而不会触发click.plugin

.trigger("click!")  感叹号匹配所有不在命名空间中click

.trigger("click")   将触发包括在命名空间内的所有click