jQuery绑定事件

jQuery提供了4种事件监听的方式，分别是bind、live、delegate、on，解除监听的函数分别是unbind、die、undelegate、off。
推荐使用on和off，live和die从1.7版后已经废弃。

bind

bind(type,data,function(e){})
type：事件类型
data：传入监听函数的数据，通过event.data获取到，可选
function：监听函数，传入event对象
特点：把监听器绑定到目标对象上，动态添加的元素不会被绑定，要给动态元素绑定一次才行。
target.click(function(){})的原理同target.bind()一样，是一种简写的形式。

<div id="wrap">
    <div class="box">a</div>
    <div class="box">b</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var boxs=$('.box');
$("#wrap").append('<div class="box">c</div>');
boxs.bind('click',function(){
    console.log($(this).text());//回调函数中的this指的是js对象，要转为jQuery对象。
})
</script>
//点击a、b方块，都会输出，但是点击动态增加的c方块，不会输出

live

target.live(type,function(e){})
特点：把监听器绑定到document上，利用事件委托机制，动态添加的元素也能触发事件。使用事件委托，新添加的元素不必再绑定一次监听器。但因为将监听器绑定到了document上，所以事件的处理得等待层层冒泡，直到冒泡到根节点才开始处理，在DOM树较深或者节点的嵌套关系很复杂时，会有意想不到的结果，根节点的负担太重了。为此，jQuery官方宣布在1.7版本开始**废弃**live，改用其他方式代替。

delegate

target.delegate(childSelector,type,data,function(){})
特点：将监听器绑定到就近的父元素上。注意：target是父元素，childSelector是子元素。

//注意，childSelector是写一个选择器，而不是一个jQuery对象，否则会出现奇怪的错误。
var boxs=$('.box');
var wrap=$("#wrap");
$("#wrap").append('<div class="box">c</div>');
wrap.delegate(boxs,'click',function(e){
    console.log(e.target);//指向触发事件的子元素
    console.log(this);//#wrap
    $(this).css('background-color','pink');//外方块会变色
})

var wrap=$("#wrap");
$("#wrap").append('<div class="box">c</div>');
wrap.delegate('.box','click',function(e){
    console.log(e.target);//指向触发事件的子元素
    console.log(this);//指向触发事件的子元素
    $(this).css('background-color','pink');//点击到的内方块变色
})

on

以上的三个方法，都是调用了on方法。
target.on(type,selector,data,function)
注意type和selector交换位置。
selector：可选，可以选择任何一级子元素，不选择表示currentTarget为本身。

var wrap=$("#wrap");
$("#wrap").append('<div class="box">c</div>');
wrap.on('click','.box',function(e){
    console.log(e.target);
})
//点击到.box才会触发监听函数

var wrap=$("#wrap");
$("#wrap").append('<div class="box">c</div>');
wrap.on('click',function(e){
    console.log(e.target);
})
//点击到非.box的#wrap子元素，也会触发监听函数

var boxs=$('.box');
var wrap=$("#wrap");
$("#wrap").append('<div class="box">c</div>');
boxs.on('click',function(e){
    console.log(e.target);
})
//点击c方块不会输出

官方有一个推荐就是尽量使用on，因为其他方法都是内部调用on来完成的，直接使用on可以提高效率，而且你完全可以用on来代替其他三种写法。

传入监听函数的event事件对象有些方法也有兼容性差异，jQuery 将其封装处理，并提供跟标准一直的命名。如果你想在 jQuery 事件回调函数中访问原来的事件对象，需要使用 event.originalEvent，它指向原生的事件对象。

trigger方法触发事件

$(".box").trigger('click');//类名为box的三个节点同时触发click方法

die

jQuery官方宣布在1.7版本开始**废弃**live，改用其他方式代替。

unbind

该方法能够移除所有的或被选的事件处理程序。

wrap.unbind();//该方法能够移除所有的事件处理程序。
wrap.unbind('click');//该方法能够移除click事件处理程序。

var wrap=$("#wrap");
wrap.bind('click',function(e){
    console.log(e.target);
})
wrap.bind('click',abc);//同一个事件可以绑定多个函数，可以是匿名函数，也可以是具名函数
wrap.unbind('click',abc);//unbind可以解除绑定具名函数
function abc(e){
    console.log("abc");
}
//不会输出abc

undelegate

undelegate() 方法移除一个或多个由 delegate() 方法添加的事件处理程序。
$(selector).undelegate(selector,event,function)
selector 可选。规定需要删除事件处理程序的选择器。
event 可选。规定需要删除处理函数的一个或多个事件类型。
function 可选。规定要删除的具体事件处理函数。

off

$(selector).off(event,selector,function(eventObj),map)
event 必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
selector 可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。
function(eventObj) 可选。规定当事件发生时运行的函数。
map 规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

var wrap=$("#wrap");
wrap.on('click','.box',function(e){
    console.log($(this));
})
wrap.on('click',abc);
wrap.off('click','.box');
function abc(e){
    console.log("abc");
}
//只是解除了'.box'的监听函数，没有解除abc函数，所以会输出abc
var wrap=$("#wrap");
wrap.on('click','.box',function(e){
    console.log($(this));
})
wrap.on('click',abc);
wrap.off('click');
function abc(e){
    console.log("abc");
}
//所有click的监听函数都被解除了。什么也不输出。

    var wrap=$("#wrap");
wrap.on('click','.box',abc);
wrap.on('click','.box',d);

wrap.off('click','.box',abc);
function abc(e){
    console.log("abc");
}
function d(e){
    console.log("d");
}
//只是解除了abc函数的绑定，还会输出d

自 jQuery 版本 1.7 起，on() 和 off() 方法是添加和移除元素上的事件处理程序的首选方法。

unbind函数也可以解除delegate绑定的事件。bind、live、delegate、on，unbind、die、undelegate、off混合起来使用非常复杂，这样使用也是完全没有必要的。