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 入门基础学习
Mar 10 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
js 轮播效果实例分享
Dec 28 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 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调用Twitter的RSS的实现代码
2010/03/10 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
webpack3之loader全解析
2017/10/26 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
Python脚本实现代码行数统计代码分享
2015/03/10 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
Python API自动化框架总结
2019/11/12 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
详解Python IO编程
2020/07/24 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
历史学专业毕业生求职信
2013/09/27 职场文书
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
超市采购员岗位职责
2015/04/07 职场文书
《颐和园》教学反思
2016/02/19 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
Java实现房屋出租系统详解
2021/10/05 Java/Android
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang