首页 > 代码库 > jQuery 绑定事件总结

jQuery 绑定事件总结

 

目前已知有:

$("..").bind("事件名",fn);

$("parent").on("事件名","selector",fn);

 $("..").one("事件名",fn);

DOM:addEvenetlistener("事件名",fn);

removeEvenetListener("事件名",函数名);

强调:要想移除事件监听,必须使用有名函数
绑定事件监听,如果添加事件时使用匿名函数
则不可能移除.

 

$("select").live("事件名",fn); 

$(document).delegate("select","事件",fn);

$("selector").die("事件名");

其中 后三种 live、delegate、die,由于其本身的性能问题,已废弃,不再讨论,尽讨论前三种:

 

1:bind

  bind通常都是是每个子元素都添加事件监听,且仅对现有元素添加绑定,无法自动给动态生成元素添加绑定

a:

$("...").bind("事件名",fn);

$("...").bind("事件名1 事件名2 ",fn);

b:事件对象
$("..").bind("事件名",function(e){

e==事件对象

e.preventDefault();

}); 

$("..").unbind("事件名",函数名); 解除绑定

$("..").unbind(); 移动该元素上所有事件绑定

2:on

on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)

off()函数主要用于解除由on()函数绑定的事件处理函数。

3:one

$("..").one("事件名",fn);绑定事件,仅触发一次后自动触绑定,只能对当前页面上己存在的元素添加事件绑定.动态生成元素无法自动绑定事件.

 

实现动态绑定的方法:

 

解决1:利用冒泡,将事件绑定己存在父元素一次

function(e){
var target = e.target;
//target 触发事件:元素
}

 


解决2:事件代理

$("parent").delegate("subselector","事件名",fn);

fn-->this--->代替 e.target

解除

$("parent").undelegate("subselector","事件名");

 

jQuery 绑定事件总结