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

off()函数主要用于解除由on()函数绑定的事件处理函数。

该函数属于jQuery对象(实例)。

语法

jQuery 1.7 新增该函数。其主要有以下两种形式的用法：

用法一：

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()函数的返回值为jQuery类型，返回当前jQuery对象本身。

实际上，off()函数的参数全是筛选条件，只有匹配所有参数条件的事件处理函数才会被移除。参数越多，限定条件就越多，被移除的范围就越小。

示例&说明

请参考下面这段初始HTML代码：

<a id="a1" href="#">CodePlayer</a>

首先，我们为上述button和<a>元素绑定事件，然后使用off()函数解除事件绑定，相应的代码如下：

function btnClick1(){alert( this.value + "-1" );}function btnClick2(){alert( this.value + "-2" );}var $body = $("body");// 为所有button元素的click事件绑定事件处理函数btnClick1$body.on("click", ":button", btnClick1 );// 为所有button元素的click事件绑定事件处理函数btnClick2$body.on("click", ":button", btnClick2 );//为所有a元素绑定click、mouseover、mouseleave事件$body.on("click mouseover mouseleave", "a", function(event){if( event.type == "click" ){alert("点击事件");}else if( event.type == "mouseover" ){$(this).css("color", "red");}else{$(this).css("color", "blue");       }});// 移除body元素为所有button元素的click事件绑定的事件处理函数btnClick2// 点击按钮，btnClick1照样执行$body.off("click", ":button", btnClick2);// 移除body元素为所有button元素的click事件绑定的所有事件处理函数(btnClick1和btnClick2)// 点击按钮，不会执行任何事件处理函数// $body.off("click", ":button");// 注意： $body.off("click", "#btn1"); 无法移除btn1的点击事件，off()函数指定的选择器必须与on()函数传入的选择器一致。// 移除body元素为所有元素(包括button和<a>元素)的click事件绑定的所有处理函数// 点击按钮或链接，都不会触发执行任何事件处理函数// $("body").off("click");// 移除body元素为所有元素的任何事件绑定的所有处理函数// 点击按钮，或点击链接或者鼠标移入/移出链接，都不会触发执行任何事件处理函数// $("body").off( );

此外off()函数还可以只移除指定命名空间的事件绑定。

var $btn1 = $("#btn1");$btn1.on("click.foo.bar", function(event){alert("click-1");});$btn1.on("click.test", function(event){alert("click-2");});$btn1.on("click.test.foo", function(event){alert("click-3");});$btn1.off("click.test"); // 移除click-2、click-3// $btn1.off("click.foo");  // 移除click-1、click-3// $btn1.off("click.foo.bar");  // 移除click-1// $btn1.off("click");  // 移除所有click事件处理函数(click-1、click-2、click-3)// $btn1.off(".foo");  // 移除所有包含命名空间foo的事件处理函数，不仅仅是click事件

--------------------------------------------------------------------------

问：发现许多前端代码用jQuery处理绑定事件的时候，没有直接用on()写绑定事件(如：$(#id).on("click",function(){}));
而是先用off()来解绑此对象的事件(如：$(#id).off("click").on("click",function(){}))。
自己写了个demo发现两种方法没有什么区别，达到的效果相同。
我知道on()绑定了事件不会自动解绑该对象的事件，需要通过off()来解绑，可为什么每次都先解绑一下呢？
请大牛们解惑：这两种的区别，哪一种比较好？

答：off().on()这个是为了防止重复绑定事件,在一个元素上面绑定的事件过多的话,效率会比较低,而且有时候会造成不好的结果,例如出现bug.
但是大多数时候都是直接绑定事件的,这个并没有好坏之分,而是需要根据需求来决定使用哪种方式.
结论
1.这两种方式没有好坏之分,只有看具体情况的需求来使用,
2.你看到的只是片面的,而没有去根据具体的开发去思考陷入这样一种误区

----------------------------------------------------------------------

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("移入移出");});//同时给多个元素绑定一样的事件$("ul li,div").on("click",function(){  alert("不响应事件!");  }); // 使用对象绑定多个事件$(":button").on({mouseover:function(){alert("移入");},mouseout:function(){alert("移出");}});//实现事件委托
//父元素ul li 给目标元素.demostrate添加事件,事件委托的好处是,目标元素可以是之前页面不存在到,后来加上去的也可以。只需要考虑一个父元素就可以，给父元素添加委托事件，不用考虑子元素的数量什么的。
$("ul li").on({click:function(){console.log('click','1111');},mouseover: function () {console.log('mouseover','1111');$(this).addClass("over");},mouseout: function () {$(this).removeClass("over");}},".demostrate");// 阻止冒泡和默认行为$(":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)这样的选择不具有通用性，祖先节点在判断的时候会无法达到预期的效果。

取消委托

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

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

同时给多个元素解绑一样的事件

$("ul li,div").off("click")

同时给元素解绑多个事件

$(".demonstrate").off("mouseover mouseout","ul li")

实现事件委托的解绑

父元素ul li 给目标元素.demostrate移除事件,事件委托的好处是,目标元素可以是之前页面不存在到,后来加上去的也可以。
只需要考虑一个父元素就可以，给父元素移除委托事件，不用考虑子元素的数量什么的。

$("ul li").off("click mouseover mouseout",".demostrate");

one()

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

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

jQuery中.off()，on()详解集合相关推荐

Java程序员从笨鸟到菜鸟之（八十九）跟我学jquery（五）jquery中的ajax详解
Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数 ...
jQuery中的Deferred详解和使用
首先,为什么要使用Deferred? 先来看一段AJAX的代码: var data;$.get('api/data', function(resp) {data = resp.data;});doSo ...
jQuery中deferred对象详解
最近看看构建工具gulp,当看到promise时突然有点陌生,于是乎意外找到了大牛阮一峰的一篇文章,写的非常的通俗易懂,对延迟对象进行了很好的讲解,虽然写的比较早但是道理都一样. 以下为主要内容: 一 ...
【转】4.1触碰jQuery：AJAX异步详解
传送门:异步编程系列目录-- 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 X ...
JavaWeb中filter的详解及应用案例
JavaWeb中filter的详解及应用案例转载自:http://www.cnblogs.com/vanl/p/5742501.html 一:Filter介绍 Filter可认为是Servlet的一 ...
Python中self用法详解
Python中self用法详解 https://blog.csdn.net/CLHugh/article/details/75000104 首页博客学院下载图文课论坛 APP 问答商城 V ...
linux中LVM是什么类型,Linux_Linux中的LVM详解，什么是LVM？什么是LVM?LVM(Logi - phpStudy...
Linux中的LVM详解什么是LVM? 什么是LVM?LVM(Logical Volume Manager)逻辑卷管理,是一种将一个或多个硬盘的分区在逻辑上集合,相当于一个大硬盘来使用,当硬盘的空间 ...
请求对象触碰jQuery：AJAX异步详解
最近一直在研究请求对象之类的问题,现在正好有机会和大家讨论一下. 传送门:异步编程系列目录-- 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous Java ...
js路由在php上面使用,React中路由使用详解
这次给大家带来React中路由使用详解,React中路由使用的注意事项有哪些,下面就是实战案例,一起来看一下. 路由通过 URL 映射到对应的功能实现,React 的路由使用要先引入 react-r ...
jQuery.extend 函数使用详解
jQuery.extend 函数使用详解一.总结一句话总结: jquery $.extend的作用就是:用于将一个或多个对象的内容合并到目标对象:$.extend( target [, objec ...

jQuery中.off()，on()详解集合