jquery的事件绑定

暂时有 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(22); });
        //大括号方式
        $("#mybutton").bind({
            click: function () { alert(1) },
            mouseout: function () { alert(2) }
        });

        //删除事件
        $("#mybutton").unbind("click");


    });

 

live：向当前或者未来匹配元素添加一个或者多个事件处理器

参数和各种方式和bind一样

 

 //单事件方式
        $("#mybutton").live("click", null, function () {
            alert(1);
        });
        //多事件的空格格式
        $("#mybutton").live("click mouseout", null, function () {
            alert(2);//缺点是多个事件都绑定相同的事件操作
        });
        //多事件的大括号形式(优点是：可以给每个不同的事件赋予不同的事件操作)
        $("#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();
            }
        });