Jquery之on()绑定事件和off()解除绑定事件

一.前言

　　on()和off()都是Jquery1.7新增的函数。

　　on()函数用于为指定元素的一个或多个事件绑定处理函数。off()函数用于移除元素上绑定的一个或多个事件的处理函数，这里主要用于处理使用on()函数绑定的事件。

二.on()

//用法一
jQueryObject.on(events[, selector][, data], handler)
//用法二
jQueryObject.on(eventsMap[, selector][, data])

//---参数说明
//events
String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如"click"、"focus click"、"keydown.myPlugin"。
//eventsMap
Object类型一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events) ，属性值对应绑定的事件处理函数(参数handler) 。
//selector
可选 / String类型一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可) 。
//data
可选 / 任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。
//handler
Function类型指定的事件处理函数。

//返回值
on()函数的返回值为jQuery类型，返回当前jQuery对象本身。

三.off()

//用法一
jQueryObject.off([events[, selector][, handler]])
//用法二
jQueryObject.off(eventsMap[, selector])

//---参数说明
//events
可选 / String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如"click"、"focus click"、"keydown.myPlugin"。
//eventsMap
Object类型一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events) ，属性值对应绑定的事件处理函数(参数handler) 。
//selector
可选 / String类型一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可) 。
//handler
可选 / Function类型指定的事件处理函数。

//返回值
off()函数的返回值为jQuery类型，返回当前jQuery对象本身。

四.例子

<div id="all">
    <input id="btn1" type="button" value="点击1" />
    <input id="btn2" type="button" value="点击2" />
</div>

// 给按钮1绑定点击
//方式1
$("#all").on("click", "#btn1", btnClick1);
////方式2
//$("#btn1").on("click", btnClick1);

// 给按钮2绑定点击
//方式1
$("#all").on("click", "#btn2", btnClick2);
////方式2
//$("#btn2").on("click", btnClick2);

function btnClick1() {
    alert("111");
    //解除绑定
    $("#all").off("click", "#btn1");
    //$("#btn1").off("click");
}

function btnClick2() {
    alert("222");
}

　　绑定了按钮的点击事件。按钮1在点击后解除了绑定事件，再次点击后，事件就不生效。