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实现的输入框选择时间插件用法实例
Feb 28 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
swiper4实现移动端导航切换
Oct 16 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中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
微信小程序使用字体图标的方法
2019/05/23 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
css3的transition属性详解
2014/12/15 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
董事长秘书工作职责
2014/06/10 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
六年级学生期末评语
2014/12/26 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python