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 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 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
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
php封装的page分页类完整实例
2016/10/18 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
Python中type的构造函数参数含义说明
2015/06/21 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
python使用turtle库绘制时钟
2020/03/25 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
python求解汉诺塔游戏
2020/07/09 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
统计员岗位职责
2013/11/14 职场文书
行政部主管岗位职责
2013/12/28 职场文书
班主任工作经验材料
2014/02/02 职场文书
国庆横幅标语
2014/10/08 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
西柏坡观后感
2015/06/08 职场文书
董事长开业致辞
2015/07/29 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
Linux中如何安装并部署Redis
2022/04/18 Servers