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的计算文本框字数的代码
Jun 06 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
小程序新版订阅消息模板消息
Dec 31 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 获取远程文件大小的3种解决方法
2013/07/11 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
js评分组件使用详解
2017/06/06 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
详解Python 解压缩文件
2019/04/09 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
大四学生思想汇报
2014/01/13 职场文书
党员批评与自我批评
2014/02/12 职场文书
村党支部书记承诺书
2014/05/29 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
初中数学教学随笔
2015/08/15 职场文书
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA