jquery事件的绑定和移除。。bind unbind

转载

mob604756fda125 2015-04-26 15:57:00

文章标签 ide 绑定事件 css 命名空间事件处理 文章分类 MySQL 数据库

绑定事件的方法：

1.直接绑定：

　　$("span").click(function(){

　　　　alert(0)

});

2.bind绑定事件：

1》绑定一个函数： $(selector).bind(event,data,function)

$("button").bind("click",function(){
  $("p").slideToggle();
});

$("button").bind("click",function(){
  $("p").slideToggle();
},false);   //值为false是阻止冒泡事件，默认为true

2》一次绑定两个函数： $(selector).bind({event:function, event:function, ...})

$("button").bind({
    click:function(){$("p").slideToggle();},
    mouseover:function(){$("body").css("background-color","red");},  
    mouseout:function(){$("body").css("background-color","#FFFFFF");}  
  });

3》js原生绑定事件

target.addEventListener(type, function, false/true);

3.移除事件 unbind

$(selector).unbind(event,function);

可以只写事件类型$(selector).unbind(event);

$('span').unbind('click mouseover');

4.one 只执行一次事件，之后马上移除事件

$("button").one({
    click:function(){$("p").slideToggle();}
  });

5.delegate 不会向上级冒泡

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）

$("body").delegate({'span','click',function(){
  
  });

6.on绑定事件

$("button").on("click",function(){
  $("p").slideToggle();
});

$("body").on("click","span",function(){
  $("p").slideToggle();
});

7.off移除事件

bind绑定事件命名空间定义方式。。。

命名空间绑定事件，方便区分不同的事件。。。。
$("button").bind("click.clk1",function(){
  $("p").slideToggle();
});


$("button").bind("click.clk2",function(){
  $("p").slideToggle();
});


$("button").unbind("click.clk1");
$("button").unbind("click.clk2");