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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
各种常用浏览器getBoundingClientRect的解析
May 21 Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
js实现表格字段排序
Feb 19 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
前端 javascript 实现文件下载的示例
Nov 24 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
短波的认识
2021/03/01 无线电
PHP的面试题集
2006/11/19 PHP
php str_replace的替换漏洞
2008/03/15 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
php生成RSS订阅的方法
2015/02/13 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
Python中的jquery PyQuery库使用小结
2014/05/13 Python
python简单程序读取串口信息的方法
2015/03/13 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
Python 的内置字符串方法小结
2016/03/15 Python
python线程、进程和协程详解
2016/07/19 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
python中sys.argv函数精简概括
2018/07/08 Python
Django进阶之CSRF的解决
2018/08/01 Python
python实现彩票系统
2020/06/28 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
世界最大的票务市场:viagogo
2017/02/16 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
财务会计专业个人求职信范本
2014/01/08 职场文书
探亲邀请信范文
2014/01/30 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
公司授权委托书样本
2014/09/15 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android