jQuery自己定义绑定的魔法升级版
jQuery自己定义绑定
首先让我们来看看jQuery的自己定义绑定的用法,你能够使用bind或者live来订阅一个事件(当然1.7以后也能够使用on了),代码例如以下:
$("#myElement").bind('customEventName',function(e){ ... }); $(".elementsClass").live('customEventName',function(e){ ... });
然后通过例如以下方式来触发事件:
$("#myelement").trigger('customEventName');
或者你也能够为自己定义事件添加额外的參数,样比例如以下:
$("#myelement").bind('customEventName',function(e,data){ if(data.custom) ... }); $("#myelement").trigger('customEventName',{ custom: false });
魔法升级
所谓魔法升级。事实上是想让整个程序全部的自己定义事件可以自己主动注冊并绑定jQuery上。然后运行的时候,全部注冊该事件的模块都会运行。比方模块User.js里定义的UserUpdate方法和Blogs.js里定义的BlogUpdate方法都定义了在公布一篇博客的时候须要运行的function函数。整个时候我们可以通过注冊统一的事件名称(比如BlogAdded)bind到jQuery指定的一个容器上(比如document)上,然后公布博客成功以后。运行$(document).trigger("BlodAdded")就OK了。
以下我们给个通用的例子代码:
var components = [User, Blog, Group, Friend, Topic, Photo];var eventTypes = ["AddComplete", "UpdateComplete", "DeleteComplete", "LockComplete", "UnLockComplete"];$.each(components, function(i,component) {$.each(eventTypes, function(i,eventType) {var handler = component[eventType];if (handler) $(document).bind(eventType, handler);});})
然后每一个js模块定义的代码安装例如以下格式:
User= {AddComplete: function(e, data) {//... },UpdateComplete: function(e, data) {//... }}
这样,无论在不论什么地方,假设我们须要的话,就能够使用jQuery的方式来触发我们的事件了:
$(document).trigger("UpdateComplete", data);
通过这样的方法。大家能够发现一个模块的method仅仅能注冊一个事件,那假设我们通过一个方法来注冊多个事件触发的话,能够使用例如以下方式:
var blogController = {blogAddOrUpdateComplete: function() {//...}}blogController.blogAddComplete = blogController.blogUpdateComplete = blogController.blogAddOrUpdateComplete;
最后注意:本文仅仅是展示一个简单的样例,不要混用不同module同一事件名称的使用方法哦。比方。User.js里的AddComplete和Blog.js里的AddComplete可能根本就没有关系,也就是说仅仅处理自己对应的逻辑。这时候。就不应该统一处理这个事件,但假设要检測的东西是一样的话。就能够使用,比方DisableUserComplete。就能够通用,由于User模块须要处理禁用账户以后的操作,Blog模块可能也须要处理禁用账户以后的操作。
本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/5399208.html,如需转载请自行联系原作者
jQuery自己定义绑定的魔法升级版相关推荐
- 解密jQuery事件核心 - 绑定设计(一)
说起jQuery的事件,不得不提一下Dean Edwards大神 addEvent库,很多流行的类库的基本思想从他那儿借来的 jQuery的事件处理机制吸取了JavaScript专家Dean Edwa ...
- jQuery unbind 删除绑定事件 / 移除标签方法
jQuery unbind 删除绑定事件 unbind([type],[data]) 是 bind()的反向操作,从每一个匹配的元素中删除绑定的事件.如果没有参数,则删除所有绑定的事件.你可以将你用b ...
- jQuery on()方法绑定动态元素的点击事件无效
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...
- jquery事件重复绑定的几种解决方法 (二)
防止事件重复绑定共有4种方法: bind().unbind()方法 live().die()方法 off().on()方法 one()方法 一.bind().unbind()方法 bind();绑定事 ...
- jQuery on()方法绑定动态元素的点击事件无响应的解决办法
$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count ...
- 浅谈jquery之on()绑定事件和off()解除绑定事件
off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该 ...
- jQuery之事件绑定到触发全过程及知识点补充
前言: 最重要的还是最后的流程图,可以试着根据流程图手写实现$().on(),下篇文章会放出模拟实现的代码. 一.举例 <div id="A" style="bac ...
- jquery动态渲染绑定点击事件不生效
原因:动态添加的HTML元素是在CSS,JS代码加载完成后再渲染的HTML页面.浏览器解析这些通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面时,这时绑定事件的标签元素还没有生成 ...
- 05 HTML字符串转换成jQuery对象、绑定数据到元素上
1 要求 将一段 HTML脚本 封装成一个字符串,将这个字符串转换成一个jQuery对象:然后将这个jQuery对象添加到指定的元素中去 2 步骤 定义字符串 var str = '<div i ...
最新文章
- [一] java8 函数式编程入门 什么是函数式编程 函数接口概念 流和收集器基本概念...
- 每日一皮:你脑海中的项目 vs 你实际编写的代码
- C#异步编程的实现方式(4)——Task任务
- JAVA单例模式:懒汉式,饿汉式
- QML与Qt C++ 交互机制详解
- note.. redis五大数据类型
- 时隔一年俺又回来了..
- 爬取亚马逊评论_如何利用插件抓取亚马逊评论和关键词?
- yocto生成各种格式的文件系统
- 无线蓝牙耳机i12充电_2019年TWS新趋势:8大品牌新款真无线蓝牙耳机支持无线充电...
- python程序基本结构有哪三种_【Python基础】Python程序结构有哪些
- JavaScript练习题
- excel筛选,排序
- html鼠标悬停显示箭头,Tippy.js 玩转鼠标悬停提示信息
- S7-1200 PLC与电子秤进行MODBUS RTU通信的具体步骤
- Laravel 5.8 前瞻
- Localize Folders and Reports
- 数字计算机模拟人脑,人造突触问世 计算机模拟人脑不是梦
- 美团内部讲座 | 清华大学崔鹏:因果推断技术最新的发展趋势
- 分享几个常做甘特图的软件
热门文章
- Java - HashSet源码解析
- JavaScript DOM高级程序设计 4.2 事件类型--我要坚持到底!
- 特征抽取 PCA主成分分析
- 在线文本字符串批量替换工具
- 1100名达摩院“扫地僧”加持,阿里云的下一个十年
- 苹果自动驾驶“排名垫底”,每1.1英里就发生一次脱离...
- Java抽象类(Abstract Class)与接口(Interface)区别
- Linux运维之道之网络基础学习1.3
- 我的QQ群,欢迎入坑!
- ubuntu16 下 源码配置Lnmp环境