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 相关文章推荐
IE php关于强制下载文件的代码
Aug 23 Javascript
jquery中eq和get的区别与使用方法
Apr 14 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
javascript包装对象实例分析
Mar 27 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
纯js+css实现在线时钟
Aug 18 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
js中的string.format函数代码
2020/08/11 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
vue底部加载更多的实例代码
2018/06/29 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
Python入门篇之正则表达式
2014/10/20 Python
实例讲解python中的协程
2018/10/08 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
利用python实现汉诺塔游戏
2021/03/01 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
商务日语毕业生自荐信范文
2013/11/14 职场文书
大学生表扬信范文
2014/01/09 职场文书
护士思想汇报
2014/01/12 职场文书
工会换届选举方案
2014/05/21 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
优秀班主任材料
2014/12/16 职场文书
停电通知范文
2015/04/16 职场文书
迎新生晚会主持词
2015/06/30 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA
图神经网络GNN算法
2022/05/11 Python