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