js自定义事件及事件交互原理概述(一)
更新时间：2013年02月01日 12:22:30 作者：
在JS中事件是JS与浏览器交互的主要途径,本文主要介绍下最简单的自定义事件，不过还有很多缺陷，感兴趣的朋友可以了解下，或许对你学习自定义事件有所帮助
在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>
上述的注释已经很详细的说明了其中的一种使用方式。这就是一个最简单的自定义事件，不过还有很多缺陷，如何优化将在（二）里面进行讲解。
观察者模式有两类对象组成：主题和观察者。主体负责发布事件，同时观察者通过订阅这些事件来观察该主体。该模式的一个关键概念是主体并不知道观察者的任何事情，也就是说它可以独自存在并正常运作即使观察者不存在。从另一方面说，观察者知道主体并能注册事件的回调函数（事件处理程序）。涉及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>
上述的注释已经很详细的说明了其中的一种使用方式。这就是一个最简单的自定义事件，不过还有很多缺陷，如何优化将在（二）里面进行讲解。
相关文章
这篇文章主要为大家介绍了Aptos SDK交互实现过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要为大家详细介绍了微信小程序实现图片压缩，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
类型检查是一种静态分析的过程，用于验证变量、函数和表达式的类型是否符合预期，这篇文章主要来和大家聊聊TypeScript中类型检查与错误捕获的相关知识，希望对大家有所帮助2023-06-06
时光荏苒，2022年又要收尾了，公司的年会是不是都安排上了？前几天看到一个年会抽奖系统，功能十分的强大，其中有一个年份数字的拼图效果深深的吸引了哥，决定用JS实现一下该效果，需要的可以参考一下2022-12-12
下面小编就为大家带来一篇基于js 本地存储(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了在微信小程序中使用web-view组件嵌入网页并实现从网页跳回到小程序的步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-01-01
在javascript中处理文本框输入值的时候，经常要用到"去掉前后空白"的功能。用过jQuery的朋友都知道，jQuery提供了一个trim()这样的功能函数，可以很轻松帮我们实现这样的效果。2009-11-11
这篇文章主要为大家详细介绍了JavaScript实现商品放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
最近公司项目需求需要对设备在地图上面进行监控,并在当设备一定距离时进行聚合,这篇文章主要给大家介绍了关于uniapp实现地图点聚合功能的相关资料,需要的朋友可以参考下2022-12-12
Bootstrap滚动监听组件scrollspy.js使用方法详解
这篇文章主要为大家详细介绍了Bootstrap滚动监听组件scrollspy.js的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
最新评论