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 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
JavaScript 输入框内容格式验证代码
Feb 11 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 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验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
各种快递查询--Api接口
2016/04/26 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
jquery等待效果示例
2014/05/01 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
sails框架的学习指南
2014/12/22 Javascript
js实现自定义路由
2017/02/04 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
ES6学习教程之模板字符串详解
2017/10/09 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
浅谈vue项目打包优化策略
2018/09/29 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
python删除列表中重复记录的方法
2015/04/28 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
python调用私有属性的方法总结
2020/07/24 Python
Python如何输出警告信息
2020/07/30 Python
python实现xml转json文件的示例代码
2020/12/30 Python
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
幼师自我鉴定范文
2013/10/01 职场文书
采购主管工作职责
2013/12/12 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
工厂总经理岗位职责
2014/02/07 职场文书
政风行风建设整改方案
2014/10/27 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫