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左右弹性滚动对联广告代码分享
Feb 19 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
jquery validate demo 基础
Oct 29 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
vue中mint-ui的使用方法
Apr 04 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 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中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
js如何实现元素曝光上报
2019/08/07 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
关于.NET, HTML的五个问题
2012/08/29 面试题
《日月潭》教学反思
2014/02/28 职场文书
干部年终考核评语
2015/01/04 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android