jq的.off解绑事件
.off( events [, selector ] [, handler ] )
描述:移除一个事件处理函数
- events类型: String一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", "keydown.myPlugin", 或者 ".myPlugin"。
- selector类型: String一个选择器,当绑定事件处理程序时匹配最初传递给
.on()的那个。 - handler以前附加的事件处理函数,或特殊值
false。$("body").off("change", "click","#div2 .textbox-text").on("change", "#div2 .textbox-text", function (e) {
console.log(2) })off()方法移除用.on()绑定的事件处理程序。有关详细信息,请参阅该网页上delegated和directly绑定事件。可以通过提供组合的事件名,名字空间,选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时,只有与这些参数完全匹配的事件处理函数才会被移除。如果一个简单的事件名称,比如提供
"click",那么所有 这种类型的事件(包括直接和委派)从元素上被移除。对于写插件,或者基于大型代码而编程时,最好是通过名字空间进行事件绑定或移除操作,这样就不会意外的移除其它代码添加的事件处理函数。在一个特定的命名空间中的所有类型的事件,可以从一个元素中删除,只是提供了一个命名空间,比如".myPlugin"。在移除事件处理时,至少要提供名字空间或事件名。要删除特定的委派事件处理程序,需要提供一个
selector的参数。该选择器字符串必须与之前通过.on()进行事件处理绑定时使用的选择器相一致。若要移除元素上所有的代理事件,而不移除任何非代理事件,请使用特殊值 "**"。处理程序也可以删除
handler参数指定名称的函数。当jQuery的绑定一个事件处理程序,它分配一个唯一的ID给处理函数。函数用jQuery.proxy()代理或类似有相同的唯一ID机制(代理函数),因此,通过代理处理程序.off可能会删除比预期更多的处理程序。在这些情况下,最好是附加和移除事件处理程序,使用命名空间。和
.on()一样,你可以传递一个events参数明确的指定而不是用events和handler作为单独参数。键是事件类型及可选的名字空间,值是绑定的处理函数,或者是特殊值false。例子:
Example: 为有颜色的按钮添加并移除事件处理。
<!DOCTYPE html>
<html>
<head>
<style>
button { margin:5px; }
button#theone { color:red; background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="theone">Does nothing...</button>
<button id="bind">Add Click</button>
<button id="unbind">Remove Click</button>
<div style="display:none;">Click!</div>
<script>
function aClick() {
$("div").show().fadeOut("slow");
}
$("#bind").click(function () {
$("body").on("click", "#theone", aClick)
.find("#theone").text("Can Click!");
});
$("#unbind").click(function () {
$("body").off("click", "#theone", aClick)
.find("#theone").text("Does nothing...");
});
</script> </body>
</html>Example: 移除所有段落上的事件:
$("p").off()Example: R移除所有段落上的代理事件:
var foo = function () {
// code to handle some kind of event
}; // ... now foo will be called when paragraphs are clicked ...
$("body").on("click", "p", foo); // ... foo will no longer be called.
$("body").off("click", "p", foo);Example: 通过传入的第三个参数,仅移除先前绑定的事件处理函数:
var foo = function () {// code to handle some kind of event};// ... now foo will be called when paragraphs are clicked ...$("body").on("click", "p", foo);// ... foo will no longer be called.$("body").off("click", "p", foo);Example: 通过指定名字空间,解除绑定表单上所有的代理事件:
var validate = function () {
// code to validate form entries
}; // delegate events under the ".validator" namespace
$("form").on("click.validator", "button", validate); $("form").on("keypress.validator", "input[type='text']", validate); // remove event handlers in the ".validator" namespace $("form").off(".validator");
jq的.off解绑事件的更多相关文章
- 【JQ】jq动态绑定事件.on()、解绑事件off()
#JQ 绑定与解绑事件的方法的历史演变 1. jquery1.4 及之前的版本,由.click() 或 .bind()方法绑定的事件,不能适用脚本创建的新元素:即是说页面加载完成后,再动态创建的DOM ...
- 从零开始学 Web 之 DOM(六)为元素绑定与解绑事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- 从零开始学 Web 之 jQuery(六)为元素绑定多个相同事件,解绑事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 5月23日笔记-js绑定事件、解绑事件、复合事件
each() $("p").each(function(i,ele){ //alert(ele.innerHTML); alert($("p:eq("+i+&q ...
- JS---DOM---为元素解绑事件
解绑事件 注意:用什么方式绑定事件, 就应该用对应的方式解绑事件 1.解绑事件 对象.on事件名字=事件处理函数--->绑定事件 对象.on事件名字=null; //1 对象.on事件名字= ...
- jQuery事件之解绑事件
语法: $(selector).unbind([eventType][,handler(eventObject)]); 返回值:jQuery 参数解释: eventTypey:类型:String以后包 ...
- bind() unbind()绑定解绑事件
.bind( eventType [, eventData], handler(eventObject)) 本文实例分析了JQuery中Bind()事件用法.分享给大家供大家参考.具体分析如下: .B ...
- jquery绑定事件,解绑事件
unbind([type],[data]) 是 bind()的反向操作,从每一个匹配的元素中删除绑定的事件.如果没有参数,则删除所有绑定的事件.你可以将你用bind()注册的自定义事件取消绑定.如果提 ...
- window.onresize绑定事件以及解绑事件
问题描述 在Vue工程中,添加样式,部分需要做到自适应,需要添加resize事件,由于是单页面应用,如果组件初始化的时候绑定事件,在切换页面的时候不去注销事件,如果来回切换,会让resize事件执行多 ...
随机推荐
- 关于Task的认识
首先来说说 Task.Factory.StartNew这种方式来创建Task,这里的WaitAll()指的是等待所有Task执行完成,并且里面的Task参数(t1,t2)是异步的,先以匿名委托方式 s ...
- 20145303 实验一 Java开发环境的熟悉(Linux + Eclipse)
20145303 实验一 Java开发环境的熟悉(Linux + Eclipse) 实验题目(4):实现学生成绩管理功能,并进行测试 思路: 对于实现学生成绩管理(student performanc ...
- Job流程:决定map个数的因素
此文紧接Job流程:提交MR-Job过程.上一篇分析可以看出,MR-Job提交过程的核心代码在于 JobSubmitter 类的 submitJobInternal()方法.本文就由此方法的这一句代码 ...
- kylin入门到实战:cube详述
版权申明:转载请注明出处. 文章来源:http://bigdataer.net/?p=306 排版乱?请移步原文获得更好的阅读体验 1.什么是cube? cube是所有dimession的组合,每一种 ...
- springMVC数据回显
1.web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=&qu ...
- SpringBoot项目结构介绍
一项目结构介绍 springboot框架本身对项目结构并没有特别的要求,但是按照最佳的项目结构可以帮助我们减少可能遇到的错误问题.结构如下: (1)应用主类SpringbootApplication应 ...
- PE文件格式学习之PE头移位
以前刚开始学网络安全,是从免杀开始的.记得那时候杀毒软件还很弱.金山江民瑞星还存在. 那会什么原理也不懂,就一直瞎鼓捣.(后来转入渗透行列了) 这段时间一直在学PE格式,突然想起来以前很古老的PE文件 ...
- Memcached delete 命令
Memcached delete 命令用于删除已存在的 key(键). 语法: delete 命令的基本语法格式如下: delete key [noreply] 多个 key 使用空格隔开,如下: d ...
- Angular2-使用Augury来调试Angular2程序
参考: http://www.jianshu.com/p/efecaea287f2https://augury.angular.io/ https://augury.angular.io/pages/ ...
- poj-2342-简单树形dp
Anniversary party Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10388 Accepted: 594 ...