js自定义事件及事件交互原理概述(二)

js自定义事件（一）的目的只是让大家简单的理解自定事件是如何模拟出来的，大家不难发现会有很多缺陷，比如： 1、此事件对象只能注册一个事件，不能提供多个事件 2、注册方法没有返回的一些信息下面我们就来解决这些问题。如下为MyEvent.js源代码：复制代码代码如下: function MyEvent(){ this.handlers={}; } MyEvent.prototype={ addHandler:function(type,handler) { if(typeof this.handlers[type]=="undefined") { this.handlers[type]=[]; } this.handlers[type].push(handler); }, fire:function(event) {if(this.handlers[event.type] instanceof Array) { var handlers=this.handlers[event.type]; for(var i= 0, len=handlers.length;i<len;i++) { handlers[i](event); } } }, removeHandler:function(type,handler) { if(this.handlers[type] instanceof Array) { var handlers=this.handlers[type]; for(var i= 0, len=handlers.length;i<len;i++) { if(handlers[i]===handler) { break; } } handlers.splice(i,1); } } }; 此类就是对第一篇的优化。属性handler变成了handlers，变成了一个数组 addHandler()方法接受两个参数：事件类型和用于处理该事件的函数。当调用该方法时，会进行一次检查，看看handlers属性中是否已经存在一个针对该事件类型的数组；如果没有，则创建一个新的。然后使用push()将该处理程序添加到数组的末尾。fire()方法用于触发一个事件，该方法接受一个参数，是一个至少包含type属性的对象，不然无法确定handlers里面是否已经存在。它会通过此type去查找对应该事件类型的一组处理程序，调用各个函数，并给出event对象。因为这些都是自定义对象，所以event对象上面的其他东西可以由你自己定义。removeHandler()方法时addHandler()的辅助，它们接受的参数一样：事件的类型和事件处理程序。这个方法搜索事件处理程序的数组找到要删除的处理程序的位置。如果找到了，则使用break操作符退出循环。然后使用splice()方法将该项目从数组中删除。这里使用方式我们换一种比较长用的形式，现在据我说知很多产品在使用事件上有两种方式，一种是直接继承（js本省没有此概念，不过我们可以通过原型链模拟出继承的效果，此处不做详细解释）此事件对象，那么就会拥有了这些行为，不过此方法比较局限，另一种方式更常用一些，就是需要使用事件的类上面创建一个属性用于存放此对象。如：子相同目录下再创建一个Student.js文件，里面的代码如下：复制代码代码如下: function Student(name) { this.myEvent=new MyEvent(); this.name=name; } Student.prototype={ setName:function(name) { var eventStart={ type:"changeNameStart", newName:name, oldName:this.name }; this.myEvent.fire(eventStart); this.name=name; } } 这里有一个学生类，构造函数里面初始化一个MyEvent对象作为属性，通过参数初始化name属性。提供一个方法setName用于改变名字，不过在改变名字之前设置了可能触发事件changNameStart的监听。创建一个html页面，放于同个目录下，代码如下：复制代码代码如下: <html> <head> <title></title> <script type="text/javascript" src="MyEvent.js"></script> <script type="text/javascript" src="Student.js"></script> <script type="text/javascript"> function init() { 　//初始化一个学生对象 var student=new Student("Mr liu"); 　//注册事件changNameStart student.myEvent.addHandler("changeNameStart",myMethod); //设置name，将会触发事件changNameStart student.setName("Mr Huang"); } function myMethod(e) { alert("事件类型："+e.type+"；改变前的名字："+ e.oldName+"；改变后的名字："+ e.newName); } </script> </head> <body> <input type="button" onclick="init()" value="测试" /> </body> </html> 这样使用起来就会很方便，也是一种常用的使用方式。一般在真正的项目里面使用使用事件时我们还需要做一些优化，比如： 1、用户并不知道我们提供了哪些事件，从代码来看好像什么事件都可以添加到handlers里面，但是真正起效果的（我们设置fire()方法的地方）事件我们并不能从代码里面很直观的看出来，一般做产品，在这方面都需要再做考虑。 2、有没有发现fire的参数event好像没用固定，在大兴项目里面，最好event也做成一个类型，在fire的地方就比较方便使用一些，event可能会有很多种类型，那时可能fire里面会出现一些判定了。希望对初入js事件的读者有所帮助，互相交流。

　　推荐阅读

　　js汉字转拼音实现代码

代码下载：复制以下代码到PinYin.js即可。调用方法：var pinyin = codefans_net_CC2PY("你好吗");PinYin.js 复制代码代码如下:var PinYin = {"a":"u554au963fu9515","ai":"u57c3u6328u54ceu5509u54c0u76>>>详细阅读

本文标题：js自定义事件及事件交互原理概述(二)

地址：http://www.17bianji.com/kaifa2/JS/22385.html

1/2 1