自定义事件,就是自己定义事件类型,自己定义事件处理函数。
我们平时操作dom时经常会用到onclick、onmousemove等浏览器特定行为的事件类型。
封装is自定义事件基本的构思:
var eventTarget = { addEvent: function(){ //添加事件 }, fireEvent: function(){ //触发事件 }, removeEvent: function(){ //移除事件 } };
在js默认事件中事件类型以及对应的执行函数是一一对应的,但是自定义事件,需要一个映射表来建立两者之间的联系。
如: 这样每个类型可以处理多个事件函数
handlers = { "type1":[ "fun1", "fun2", // "..." ], "type2":[ "fun1", "fun2" // "..." ] //"..." }
代码实现:
function EventTarget(){ //事件处理程序数组集合 this.handlers={}; } //自定义事件的原型对象 EventTarget.prototype={ //设置原型构造函数链 constructor:EventTarget, //注册给定类型的事件处理程序 //type->自定义事件类型,如click,handler->自定义事件回调函数 addEvent:function(type,handler){ //判断事件处理函数中是否有该类型事件 if(this.handlers[type]==undefined){ this.handlers[type]=[]; } this.handlers[type].push(handler); }, //触发事件 //event为一个js对象,属性中至少包含type属性。 fireEvent:function(event){ //模拟真实事件的event if(!event.target){ event.target=this; } //判断是否存在该事件类型 if(this.handlers[event.type] instanceof Array){ var items=this.handlers[event.type]; //在同一事件类型下可能存在多个事件处理函数,依次触发 //执行触发 items.forEach(function(item){ item(event); }) } }, //删除事件 removeEvent:function(type,handler){ //判断是否存在该事件类型 if(this.handlers[type] instanceof Array){ var items=this.handlers[type]; //在同一事件类型下可能存在多个处理事件 for(var i=0;i<items.length;i++){ if(items[i]==handler){ //从该类型的事件数组中删除该事件 items.splice(i,1); break; } } } } } //调用方法 function fun(){ console.log(‘执行该方法‘); } function fun1(obj){ console.log(‘run ‘+obj.min+‘s‘); } var target=new EventTarget(); target.addEvent("run",fun);//添加事件 target.addEvent("run",fun1);//添加事件 target.fireEvent({type:"run",min:"30"});//执行该方法 123 target.removeEvent("run",fun);//移除事件 target.fireEvent({type:"run",min:"20"});//123
原文:https://www.cnblogs.com/xiaoan0705/p/10574223.html