暂时有 bind(),live(),delegate(),on() 这四个事件监听函数
对应的4个事件解除函数分别是： unbind(),die(),undelegate(),off()
bind：向匹配元素添加一个或者多个事件处理器
$(selector).bind(event,data,function):向匹配元素添加一个或者多个事件
event：必选：
data：可选
function:必选
$(function () {
//单个事件
$("#mybutton").bind("click", null, function () { });
//空格形式设置多个事件
$("#mybutton").bind("mouseout click", null, function () { alert(); });
//大括号方式
$("#mybutton").bind({
click: function () { alert() },
mouseout: function () { alert() }
});
//删除事件
$("#mybutton").unbind("click");
});
live：向当前或者未来匹配元素添加一个或者多个事件处理器
参数和各种方式和bind一样
//单事件方式
$("#mybutton").live("click", null, function () {
alert();
});
//多事件的空格格式
$("#mybutton").live("click mouseout", null, function () {
alert();//缺点是多个事件都绑定相同的事件操作
});
//多事件的大括号形式(优点是：可以给每个不同的事件赋予不同的事件操作)
$("#mybutton").live({
click: function () { alert("click"); },
mouseout: function () { alert("mouseout");}
}); $("#mybutton").die("click mouseout");
on：为当前或者未来的元素添加一个或者多个事件，并规定当这些事件发生时运行的函数
$(selector).on(event,childselector,data,function)
比上面两个多了一个 childselector参数：
作用是：需要添加事件处理程序的元素，一般为selector的子元素
$("#mybutton").on("click",null, null, function () {
alert("on 单击");
});
$("#mybutton").on("click mouseout", null, null, function () {
alert("on 多事件空格");
});
$("#mybutton").on({
click: function () { alert("on 大括号形式：click"); },
mouseout: function () { alert("on 大括号形式：mouseout")}
});
$("#mybutton").off("click");
delegate：
为指定的元素(被选元素的子元素)添加一个或者多个事件处理程序，并规定当这些事件发生时运行的函数
参数和on一样有四个参数
/***********单元素添加单事件***********/
//按钮绑定单击事件 实现button2的显示隐藏
$(".header").delegate("#btn-test1", "click", function () {
$(".container").slideToggle();
});
/***********单元素添加多事件***********/
//空格相隔方式
$(".header").delegate("#btn-test1", "click mouseout", function () {
$(".container").slideToggle();
});
//大括号替代方式
$(".header").delegate("#btn-test1", {
"mouseout": function () {
alert("这是mouseout事件!");
},
"click": function () {
$(".container").slideToggle();
}
});