标签：obj set 扩展 bsp 拖拽 key 一个 event 维护
把一个效果或者功能用面向对象的方法封装起来，只提供给用户一些相关的方法或者数据接口
1、特点
易扩展，易维护。相互之间不会有影响
2、组件的组成
①配置参数
放在初始化函数里，这是一段关于拖拽的代码
初始化函数
Drag.prototype.init=function(opt){ this.settings={ downFn:opt.downFn||function(){}, moveFn:opt.moveFn||function(){}, upFn:opt.upFn||function(){} }; };
默认参数
//这是默认参数，下面的程序都要用这里的参数 this.settings={ id:‘‘, //这个属性是必传的 downFn:function(){}, moveFn:function(){}, upFn:function(){} };
要拿用户传的参数，去覆盖默认参数，用for in方法
//初始化函数 Drag.prototype.init=function(opt){ //在初始化函数里面，拿用户传进来的参数去覆盖默认的参数，并且这个代码要放在init函数的最上面 for(var attr in opt){ if(this.settings.hasOwnProperty(attr)){ //如果默认参数里有这个属性的话，才拿用户传入的参数去覆盖 this.settings[attr]=opt[attr]; } } this.obj=document.getElementById(this.settings.id); var This=this; this.obj.onmousedown=function(ev){ This.down(ev); }; };
②方法
放在原型里的函数
Drag.prototype.down=function(ev){ this.settings.downFn.call(this); this.disX=ev.clientX-this.obj.offsetLeft; this.disY=ev.clientY-this.obj.offsetTop; var This=this; document.onmousemove=function(ev){ This.move(ev); }; document.onmouseup=function(){ This.up(); }; };
③自定义事件
除了系统以外的事件
需要用到事件绑定器、事件触发器
自己定义的事件，除了系统提供以外的事件。有利于多人协作开发，可扩展js原有事件
自定义事件其实就是调用函数，在指定的环境下让这个函数触发，就相当于事件了
(1)自定义事件三要素
对象、事件名、事件处理函数
1、可以利用对象数据结构里的key:value的形式把事件名字与事件处理函数对应起来
2、把多个函数放到一个数组里，循环去执行数组里每个函数，就可以做到让所有函数都执行
(2)定义事件
obj.events={
‘事件名1‘:[fn1,fn2],
‘事件名2‘:[fn3,fn4,fn5],
}
//添加自定义事件 function customEvent(obj,eventName,fn){ obj.events=obj.events||{}; //如果obj身上已经有个这属性，就用自己的 obj.events[eventName]=obj.events[eventName]||[]; //如果events里面有内容了，就用自己的 obj.events[eventName].push(fn); //把事件用push的方法添加到数组里 }
(3)调用事件（循环去调）
obj.events[‘事件名1‘].fn1();
obj.events[‘事件名1‘].fn2();
//触发自定义事件 function trigger(obj,eventName){ //触发的时候要去看一下对象身上有没有这个事件，事件是放在对象身上的events下 if(obj.events[eventName]){ for(var i=0;i<obj.events[eventName].length;i++){ obj.events[eventName][i].call(obj); } } };
调用事件
customEvent(box,‘点击‘,function(){ console.log(‘box点击了‘); });
标签：obj set 扩展 bsp 拖拽 key 一个 event 维护
原文地址：http://www.cnblogs.com/shengnan-2017/p/7671167.html
