jQuery事件绑定和委托实例

本文实例讲述了jQuery事件绑定和委托。分享给大家供大家参考。具体方法如下：

jQuery事件的绑定和委托可以用多种方法实现，on()  、 bind()  、 live()  、 delegate() ，还有one()。
 
有时我们可能会像下面这样绑定一个事件：
代码如下:$("#div1").click(function() { 
    alert("点击后触发"); 
});

上面的事件绑定，我们可以通过多种方式去实现：
 
1. on()
代码如下://无数据参数 
$("p").on("click", function(){ 
alert( $(this).text() ); 
}); 
 
//有数据参数 
function myHandler(event) { 
alert(event.data.foo); 
} 
$("p").on("click", {foo: "bar"}, myHandler)

与on()对应的是off()，用来移除事件绑定：
代码如下:var foo = function () { 
  // code to handle some kind of event 
}; 
// ... now foo will be called when paragraphs are clicked ... 
$("body").on("click", "p", foo); 
 
// ... foo will no longer be called. 
$("body").off("click", "p", foo);

off()：移除on()进行的绑定
one()：只绑定一次。
 
2. bind()

参数：
(type,[data],function(eventObject))
type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
 
fn:绑定到每个匹配元素的事件上面的处理函数
 
(type,[data],false)
type:含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
 
false: 将第三个参数设置为false会使默认的动作失效。
 
同时绑定多个事件类型:
代码如下:$('#foo').bind('mouseenter mouseleave', function() { 
  $(this).toggleClass('entered'); 
});

同时绑定多个事件类型/处理程序:
代码如下:$("button").bind({ 
  click:function(){$("p").slideToggle();}, 
  mouseover:function(){$("body").css("background-color","red");},   
  mouseout:function(){$("body").css("background-color","#FFFFFF");}   
});

你可以在事件处理之前传递一些附加的数据。
代码如下:function handler(event) { 
  alert(event.data.foo); 
} 
$("p").bind("click", {foo: "bar"}, handler)

通过返回false来取消默认的行为并阻止事件起泡。
代码如下:$("form").bind("submit", function() { return false; })