码迷,mamicode.com
首页 > Web开发 > 详细

js自定义事件模式

时间:2017-05-10 17:03:12      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:add   实例   注册   功能   dom   触发事件   function   需要   没有   

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

  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‘);  //触发事件

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

 

js自定义事件模式

标签:add   实例   注册   功能   dom   触发事件   function   需要   没有   

原文地址:http://www.cnblogs.com/zhaozhipeng/p/6836830.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!