关于jquery的事件命名空间
在多人协作的前端开发中,或许会遇到一个问题:几个开发人员都给一个元素添加了同样的事件,但是又有开发人员想要解除掉元素身上的某个事件效果,这时候操作起来就有些麻烦,需要用到jquery给我们提供的事件命名空间。说的有点抽象,举个例子先:
比如有一个开发人员写到下面这样的代码:
$("#box").on('click',function () {
$(this).css('background','#0f0');
})
还有一个开发人员写成这样:
$("#box").on('click',function () {
$(this).css('color','#fff');
})
这时候如果第三个开发人员想要去除掉#box点击时文字变色的事件,他会考虑写下面的代码:
$("#box").off('click');
然而,这时你却发现,#box身上的click事件都被解绑了,这当然不是我们想要的,我们想要的是把文字变色的事件解绑,而背景变色的事件保留,这时,就要用上jquery给我们提供的事件命名空间。把上面的代码改写成如下:
$("#box").on('click.backgroud',function () {
$(this).css('background','#0f0');
}); $("#box").on('click.color',function () {
$(this).css('color','#fff');
}); $("#box").off('click.color');
这样就可以实现上述的请求,而这里添加的background和click就是事件的命名空间,好玩吧,有趣的jquery等着你去探索!
关于jquery的事件命名空间的更多相关文章
- jquery的事件命名空间详解
jquery现在的事件API:on,off,trigger支持带命名空间的事件,当事件有了命名空间,就可以有效地管理同一事件的不同监听器,在定义组件的时候,能够避免同一元素应用到不同组件时,同一事件类 ...
- 浅谈jquery事件命名空间
什么是jquery的事件命名空间? 先看如下简单代码: $("#btn").on("click.name1.name2",function(){ console ...
- jQuery事件命名空间多事件绑定自定义事件js 命名空间 javascript命名空间
http://blog.csdn.net/pigpigpig4587/article/details/24727791 jQuery事件命名空间 jQuery支持事件命名空间,以方便事件管理.例如,在 ...
- jQuery 学习笔记(5)(事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件)
1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...
- jQuery事件命名空间
先看一些代码: 也可以用bind进行事件绑定.我们看到上面的代码,我们可以在事件后面,以点号,加我们的名字,就是事件命名空间.所谓事件命名空间,就是事件类型后面以点语法附加一个别名,以便引用事件,如& ...
- 第4章 jQuery的事件和动画(1)——事件篇
jQuery扩展了JavaScript的基本事件处理机制,极大增强了事件处理能力 一. jQuery的事件 1. $(document).ready(function(){})加载方式 再次回到win ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- JQuery实践--事件
通过HTML网页所呈现的界面是异步的和事件驱动的.步骤: 建立用户界面 等待又去的事情发生 做出相应的反应 重复 浏览器所实现的事件模型 DOM第0级事件模型 事件处理程序是通过吧函数实例的引用指派到 ...
- Jquery的事件操作和文档操作
对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...
随机推荐
- PostgreSQL Replication之第六章 监控您的设置(3)
6.3 检查操作系统进程 一旦我们检查了归档以及我们的系统视图,我们就准备检查系统 进程.检查系统进程可能看起来有点粗糙,但它被证明非常有效. 在master上,我们可以简单地检查一个名为wal_se ...
- 2018年湘潭大学程序设计竞赛 maze(bfs)
链接:https://www.nowcoder.com/acm/contest/105/F来源:牛客网 有q个单向传送阵,每个传送阵各有一个入口和一个出口,入口和出口都在迷宫的格子里,当走到或被传送到 ...
- PHP——下载图片到本地代码
<?php //获取网页图片 $url = "http://qlogo2.store.qq.com/qzone/393183837/393183837/50"; $curl ...
- XRDP与VNC的关系(转载)
XRDP与VNC的关系 如果仅仅安装XRDP协议.是不能在windows上使用远程桌面连接到Ubuntu. 还须要安装VNCServer才行. 所以,XRDP启动之后.系统会自己主动启动一个VNC会话 ...
- Centos7:yum安装apache,编译安装php5.6,不解析php的解决方法
首先,说一下问题发生的场景: 因为懒,所以用 yum 安装 apache ,因为 centos 的源自带 php 5.4 不能符合环境要求,而不想用其他源,所以选择源码编译安装 php 5.6 安装完 ...
- 紫书 习题 10-10 UVa 1645(递推)
除了根节点以外,有n-1个节点,然后就看n-1的因数有那些,所有因数加起来(递推)就好了. #include<cstdio> #define REP(i, a, b) for(int i ...
- [NOIP2009] 靶形数独(搜索)
P1074 靶形数独 题目描述 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向 Z 博士请教,Z 博士 ...
- hiho 1068 重新整理的 Sparse-Table(RMQ)模板
http://hihocoder.com/problemset/problem/1067代码: #include <iostream> #include <cstdio> #i ...
- etTimeout来实现setInterval
etTimeout来实现setInterval <script type="text/javascript"> function interval(func, w, t ...
- GPU方法做倒排压缩和交集计算
之前一直想读这篇,今天读了一下,颇有收获: 1.对文档按相似term聚类之后,delta较小,能够提高压缩率(similarity graph) 1.GPU一般能够有几百个核,有shared memo ...