js自定义事件模式

Posted 2020-09-17 赵大树

---恢复内容开始---

　　js事件用的最多的就是默认事件。不过有时候需要自定义事件来使用。

　　参照默认事件的模式，例如click事件，鼠标点击dom,先触发click事件，然后执行dom上的事件处理程序。

<p>点我</p>

document.getElementByTagName(‘p‘)[0].addEventLisener(‘click‘,()=>{

　　alert(‘click‘);

})　　

　　同理，自定义事件也需要三个部分，即事件注册、事件触发、处理程序。

这里使用原型方法做例：

var ZdsEvent=function(){ //自定义事件对象
　　return;
};
ZdsEvent.prototype={ //原型对象
　　handles:{ //事件处理程序

　　},
　　on(zdsEvent,handle){ //事件注册
　　　　if(!this.handles[zdsEvent]){
　　　　　　this.handles[zdsEvent]=handle;
　　　　}else{
　　　　　　console.log(‘这个事件已经注册过了‘);
　　　　};
　　},
　　emit(zdsEvent){ //事件触发
　　　　if(this.handles[zdsEvent]){
　　　　　　this.handles[zdsEvent]();
　　　　}else{
　　　　　　console.log(‘还没有注册这个事件呢‘);
　　　　}
　　}
}
var zds=new ZdsEvent();  //实例事件对象
zds.on(‘con‘,()=>{　//注册一个打印内容事件
　　console.log(‘第一个事件‘)
});
zds.emit(‘con‘);  //触发事件

这就是一个自定义事件的最基本模式，还有一些其他的功能，如注销事件和一次性事件等，不过最基本的功能就是这样