js自定义事件及事件交互原理概述(一)


Posted in Javascript onFebruary 01, 2013

在JS中事件是JS与浏览器交互的主要途径。事件是一种叫做观察者的设计模式,这是一种创建松散耦合代码的技术。对象可以发布事件,用来表示在该对象生命周期中某个有趣的时刻到了。然后其他对象可以观察该对象,等待这些有趣的时刻到来并通过运行代码来响应。

观察者模式有两类对象组成:主题和观察者。主体负责发布事件,同时观察者通过订阅这些事件来观察该主体。该模式的一个关键概念是主体并不知道观察者的任何事情,也就是说它可以独自存在并正常运作即使观察者不存在。从另一方面说,观察者知道主体并能注册事件的回调函数(事件处理程序)。涉及DOM上时,DOM元素便是主体,你的事件处理代码便是观察者。

事件是与DOM交互的最常见的方式,但它们也可以用于非DOM代码中----通过实现自定义事件。自定义事件背后的概念是创建一个管理事件的对象,让其他对象监听那些事件。说简单点就是我们希望在程序运行的时候,路线可能会有很多,如果程序运行到了一个特殊的地方,我们希望立刻运行用户注册的方法里面的代码,运行完毕后再继续运行,这个过程叫做监听。

例如,创建一个文件MyEvent.js文件,里面创建一个类:

function MyEvent(){ 
this.handler; 
} 
MyEvent.prototype={ 
addHandler:function(handler) 
{ 
this.handler=handler; 
}, 
fire:function() 
{ 
this.handler(); 
}, 
removeHandler:function() 
{ 
this.handler=null; 
} 
}

上面使用js原型的思想创建的一个类,如果读者不太了解可以查看相关资料。MyEvent类型有一个单独的属性handler,用于存储事件处理程序(也就是用户注册的方法)。还有三个方法:addHandler(),用于注册事件处理程序;fire(),用于触发一个事件;以及removeHandler(),用于注销事件的处理程序。

然后我们可以这样使用,新建一个html文件,放于和MyEvent.js同一个目录,方便引用。代码如下:

<html> 
<head> 
<title></title> 
<script type="text/javascript" src="MyEvent.js"></script> 
<script type="text/javascript"> 
function init() 
{ 
//初始化一个事件对象 
var myEvent=new MyEvent(); 
//注册方法 
myEvent.addHandler(myMethod); 
//运行到此处时触发事件 
myEvent.fire(); 
//移除事件注册的方法 
myEvent.removeHandler(); 
//再次触发事件,发现无效 
myEvent.fire(); 
} 
function myMethod() 
{ 
alert("成功"); 
} 
</script> 
</head> 
<body> 
<input type="button" onclick="init()" value="测试" /> 
</body> 
</html>

上述的注释已经很详细的说明了其中的一种使用方式。这就是一个最简单的自定义事件,不过还有很多缺陷,如何优化将在(二)里面进行讲解。
Javascript 相关文章推荐
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
javascript基本数据类型和转换
Mar 17 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 #Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 #Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 #Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 #Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 #Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 #Javascript
js用Date对象处理时间实现思路及代码
Jan 31 #Javascript
You might like
php下使用SMTP发邮件的代码
2008/01/10 PHP
php网站地图生成类示例
2014/01/13 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
Python 中 Meta Classes详解
2016/02/13 Python
Python实现线程状态监测简单示例
2018/03/28 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
pandas分批读取大数据集教程
2020/06/06 Python
审计局2014法制宣传日活动总结
2014/11/01 职场文书
2014年后勤工作总结
2014/11/18 职场文书
会计求职简历自我评价
2015/03/10 职场文书
党性修养心得体会2016
2016/01/21 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python