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 相关文章推荐
javascript数组去掉重复
May 12 Javascript
jquery异步请求实例代码
Jun 21 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 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中的unset究竟会不会释放内存
2013/07/18 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
详解Bootstrap插件
2016/04/25 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
详解jQuery事件
2017/01/13 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
Python多线程获取返回值代码实例
2020/02/17 Python
Python如何实现的二分查找算法
2020/05/27 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
Python程序慢的重要原因
2020/09/04 Python
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
关于打架的检讨书
2014/01/17 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
党校毕业个人总结
2015/02/28 职场文书
公司奖励通知
2015/04/21 职场文书
2015年项目工作总结
2015/04/29 职场文书
无罪辩护词范文
2015/05/21 职场文书
国际贸易实训总结
2015/08/03 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers