[jQuery]高级事件[委托]

  $(function () {
        //bind 绑定了三个事件
        $(".button").bind("click", function () {
            alert("事件不委托");
        });
        //使用live绑定的是document，而非button
        //所以，永远只会绑定一次事件

        $(".button").live("click", function () {
            alert("事件委托");
        });

        // bind 无法动态绑定事件
        $(".button").bind("click", function () {
            $(this).clone().appendTo("#box"); //克隆一个按钮 追加到box中
        });

        // live 可以动态绑定事件，因为事件绑定在document上
        // live 绑定在document上，而点击button 其实是冒泡到document上
        // 并且点击document时候，需要验证event.type 和 event.target才能触发
        // live 不支持连缀调用
        $(".button").live("click", function () {
            $(this).clone().appendTo("#box"); //克隆一个按钮 追加到box中
        });

        // live 的替代方法 delegate
        $("#box").delegate(".button", "click", function () {
            $(this).clone().appendTo("#box"); //克隆一个按钮 追加到box中
        })

        $("#box").undelegate(".button", "click"); // 解绑

        //最新绑定方法  on off one
        $(".button").on("click", { user: "Lee" }, function (e) {
            alert("替代bind" + e.data.user);
        });

        $(".button").on("mouseover mouseout", function (e) {
            alert("移入移出"); //
        });
        $(".button").on({
            mouseover: function () {
                alert("移入");
            }, mouseout: function () {
                alert("移出");
            }
        });


        $("form").on("submit", function () {
            return false;  //阻止默认 和阻止冒泡
        });

        $("form").on("submit", false);

        //替代 live delegate
        $("#box").on("click", ".button", function () {
            $(this).clone().appendTo("#box");
        });

        //移出事件委托
        $("#box").off("click", ".button");

        //仅一次触发事件
        $(".button").one("click", function () {
            alert("仅一次事件触发");
        });
    });