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操作label给label赋值及取label的值示例
Nov 07 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
javascript中mouseover、mouseout使用详解
Jul 19 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
js实现无缝轮播图
Mar 09 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 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实现的生成静态HTML速度快类库
2007/03/31 PHP
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
javascript 常用代码技巧大收集
2009/02/25 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
python数值基础知识浅析
2019/11/19 Python
基于python使用tibco ems代码实例
2019/12/20 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
python中pop()函数的语法与实例
2020/12/01 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
干部下基层实施方案
2014/03/14 职场文书
文明城市标语
2014/06/16 职场文书
工作失职自我检讨书
2015/05/05 职场文书
行为规范主题班会
2015/08/13 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
python flask开发的简单基金查询工具
2021/06/02 Python
MySQL窗口函数的具体使用
2021/11/17 MySQL