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

on()函数

从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。

on()函数用于为指定元素的一个或多个事件绑定事件处理函数。

你还可以额外传递给事件处理函数一些所需的数据。

该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

语法

用法一：

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类型指定的事件处理函数。

参数handler中的this指向当前匹配元素的后代元素中触发该事件的DOM元素。如果参数selector等于null或被省略，则this指向当前匹配元素(也就是该元素)。
on()还会为handler传入一个参数：表示当前事件的Event对象。

 

off()函数
off()函数用于移除元素上绑定的一个或多个事件的事件处理函数。
off()函数主要用于解除由on()函数绑定的事件处理函数。

语法
用法一：

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()函数将会移除当前匹配元素上为后代元素selector绑定的events事件的事件处理函数handler。

如果省略参数selector，则移除为任何元素绑定的事件处理函数。

参数selector必须与通过on()函数添加绑定时传入的选择器一致。

如果省略参数handler，则移除指定元素指定事件类型上绑定的所有事件处理函数。

如果省略了所有参数，则表示移除当前元素上为任何元素绑定的任何事件类型的任何事件处理函数。

容易忽略的点：off所解除元素的绑定事件，其中选择器必须和on绑定事件时所用的选择器一致。

 

要删除通过on()绑定的事件，请使用off()函数。如果要附加一个事件，只执行一次，然后删除自己，请使用one()函数。

 

代码示例

html代码

CodePlayer

 

页面加载时执行的jquery代码

function btnClick1(){

  alert( this.value + "-1" );

}

function btnClick2(){

  alert( this.value + "-2" );

}

var $body = $("body");

// 给按钮1绑定点击

$body.on("click", "#btn1", btnClick1 );

// 给按钮2绑定点击

$body.on("click", "#btn2", btnClick2 );

//为所有a元素绑定click、mouseover、mouseleave事件

$body.on("click mouseover mouseleave", "a", function(event){

  if( event.type == "click" ){

    $body.off("click", "#btn1");//取消btn1的绑定事件。成功执行

    alert("点击事件");

    alert("ddd");

  }else if( event.type == "mouseover" ){

    $(this).css("color", "red");

  }else{

    $(this).css("color", "blue");

  }

});

// 移除body元素为所有button元素的click事件绑定的事件处理函数btnClick2

// 点击按钮，btnClick1照样执行

$body.off("click", ":button", btnClick2);

// 点击按钮1，不会执行任何事件处理函数

// $body.off("click", "#btn1");

// 注意： $body.off("click", ":button"); 无法移除btn1的点击事件，off()函数指定的选择器必须与on()函数传入的选择器一致。

// 移除body元素为所有元素(包括button和元素)的click事件绑定的所有处理函数

// 点击按钮或链接，都不会触发执行任何事件处理函数

// $("body").off("click");

// 移除body元素为所有元素的任何事件绑定的所有处理函数

// 点击按钮，或点击链接或者鼠标移入/移出链接，都不会触发执行任何事件处理函数

// $("body").off( );

 

项目中使用示例

// 往返开关

$("#tick-switch").on("click", function () {

    $(this).parent().toggleClass("active");

    $("#end-n-data").toggleClass("on")

    //根据选择的单程/往返决定是否加载返程日期的单击事件

    if (!$("#end-date").attr("data-choosed")) {

       $("#end-date").attr("data-choosed", "true");

       $("#end-date").on("click", enddateOnCallback);

    }

    else {

       $("#end-date").removeAttr("data-choosed");

       $("#end-date").off("click");

    }

});

 

参考：http://www.jb51.net/article/95723.htm

转载于:https://www.cnblogs.com/zhaow/p/9753854.html