jQuery高级事件---on、off、one和事件委托

on、off、one

jQuery1.7 以后推出了.on()和.off()方法，替代之前的方法。on/off整合了bind、unbind、事件委托等方法

on替代bind方法

on可以替代bind方法，使用方法和bind一致

// 绑定单个事件
    $(":button").on("click",function(){
        alert("on");
    });

// 传递数据
    $(":button").on("click",{name:"tom"},function(e){
        alert(e.data.name);
    });

// 绑定多个事件
    $(":button").on("mouseover mouseout",function(e){
        alert("移入移出");
    });

// 使用对象绑定多个事件
    $(":button").on({
        mouseover:function(){
            alert("移入");
        },
        mouseout:function(){
            alert("移出");
        }
    });

// 阻止冒泡和默认行为
    $(":submit").on("click",function(e){
        e.preventDefault();
        e.stopPropagation();
        alert("取消默认行为和冒泡");
    });

off替代unbind方法

off可以替代unbind方法，使用方法不变

    function test(){
        alert("test");
    }

    $(":button").on("click.on",test);  //根据函数解除绑定
    $(":button").off("click");     // 根据事件解除绑定
    $(":button").off("click.on");  // 根据命名空间解除绑定

事件委托

实际上是给祖先绑定一个事件。子元素通过冒泡将事传递到祖先元素，祖先元素再判断点击的是不是button，如果是，就执行相同的事件。因此，当有很多个相同的按钮需要绑定相同的事件时，可以用事件委托将事件委托给祖先节点，有祖先节点判断子节点是否执行某事件。如果不适用事假委托，那个每一个节点都需要绑定一个事件。
使用方法是：
祖先节点.on(“事件”,”子元素”,”绑定的函数”);

on的第二个参数需要写成所有相同元素通用的写法，不能写成:button:eq(0)这样的选择不具有通用性，祖先节点在判断的时候会无法达到预期的效果。

    $("div:eq(0)").on("click",":button",function(){
        $(this).clone(true).appendTo("div:eq(0)");
    });

// 换成document也可：
    $(document).on("click",":button",function(){
        $(this).clone(true).appendTo("div:eq(0)");
    });

取消委托

off函数还可以取消委托,取消委托必须由祖先节点调用调用方法是：
祖先节点.off(“事件”,”子元素”);

$("div:eq(0)").off('click', '.button');

one()

绑定元素执行完毕后自动移除事件，可以方法仅触发一次的事件。

    $(":button").one("click",function(){
        alert("one");
    });

用到的方法

clone()

生成被选元素的副本，包含子节点、文本和属性。
$(selector).clone(includeEvents)
- includeEvents 规定是否复制元素的所有事件处理。true/false,默认是false

appendTo()

在被选元素的结尾（仍然在内部）插入指定内容。

  $("button").click(function(){
    $("<b>sss</b>").appendTo("p");
  });