js利用trigger和bind实现自定义事件的定义和触发

90 阅读 0 评论 60 点赞

我是靠谱客的博主开心朋友，最近开发中收集的这篇文章主要介绍js利用trigger和bind实现自定义事件的定义和触发，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

示例一：

看一组示例demo：（js实现事件模型bind与trigger）

 
  function 
   Emitter() { 
 
  this._listener 
   = []; 
  //_listener[自定义的事件名] = [所用执行的匿名函数1, 所用执行的匿名函数2] 
 
   } 
 
  //注册事件 
 
  Emitter.prototype. 
  bind 
  = 
  function ( 
  eventName, 
  callback) { 
 
  var listener 
   = 
  this._listener[eventName] 
   || []; 
  //this._listener[eventName]没有值则将listener定义为[](数组)。 
 
   listener. 
  push(callback); 
 
  this._listener[eventName] 
   = listener; 
 
   } 
 
  //触发事件 
 
  Emitter.prototype. 
  trigger 
  = 
  function ( 
  eventName) { 
 
  var args 
   = 
  Array.prototype.slice. 
  apply( 
  arguments). 
  slice( 
  1); 
  //atgs为获得除了eventName后面的参数(注册事件的参数) 
 
  var listener 
   = 
  this._listener[eventName]; 
 
  if ( 
  ! 
  Array. 
  isArray(listener)) 
  return; 
  //自定义事件名不存在 
 
   listener. 
  forEach( 
  function ( 
  callback) { 
 
  try { 
 
   callback. 
  apply( 
  this, args); 
 
   } 
  catch (e) { 
 
  console. 
  error(e); 
 
   } 
 
   }) 
 
   } 
 
  //实例 
 
  var emitter 
   = 
  new 
   Emitter(); 
 
   emitter. 
  bind( 
  "myevent", 
  function ( 
  arg1, 
  arg2) { 
 
  console. 
  log(arg1, arg2); 
 
   }); 
 
   emitter. 
  bind( 
  "myevent", 
  function ( 
  arg1, 
  arg2) { 
 
  console. 
  log(arg2, arg1); 
 
   }); 
 
   emitter. 
  trigger( 
  "myevent", 
  "a", 
  "b")

示例二：（js实现事件模型bind与trigger）

 
  function 
   LazyMan( 
  name) { 
 
  return 
  new 
  _LazyMan(name); 
 
   } 
 
  function 
   _LazyMan( 
  name) { 
 
  console. 
  log( 
  "Hi This is " 
  + name) 
 
  this.task 
  = []; 
 
  var _this 
   = 
  this; 
 
  var namer 
   = ( 
  function( 
  name) { 
 
  return 
  function() { 
 
  console. 
  log(name); 
 
   _this. 
  next(); 
 
   } 
 
   })(name) 
 
  this.task. 
  push(namer); 
 
  setTimeout( 
  function() { 
 
   _this. 
  next(); 
 
   }, 
  0); 
 
  return 
  this; 
 
   } 
 
  _LazyMan.prototype.next 
   = 
  function() { 
 
  var fn 
   = 
  this.task. 
  shift(); 
 
   fn 
  && 
  fn(); 
 
   } 
 
  _LazyMan.prototype. 
  eat 
  = 
  function( 
  val) { 
 
  var _this 
   = 
  this; 
 
  var eat 
   = ( 
  function( 
  val) { 
 
  return 
  function() { 
 
  console. 
  log( 
  "eat" 
  + val); 
 
   _this. 
  next(); 
 
   } 
 
   })(val); 
 
  this.task. 
  push(eat); 
 
  return 
  this; 
 
   } 
 
  _LazyMan.prototype. 
  sleep 
  = 
  function( 
  time) { 
 
  var _this 
   = 
  this; 
 
  var timer 
   = ( 
  function( 
  time) { 
 
  return 
  function() { 
 
  setTimeout( 
  function() { 
 
  console. 
  log( 
  "wait"); 
 
  console. 
  log( 
  "time=" 
  + time); 
 
   _this. 
  next(); 
 
   }, time 
  * 
  1000); 
 
   } 
 
   })(time); 
 
  this.task. 
  push(timer); 
 
  return 
  this; 
 
   } 
 
  //LazyMan("Hank").eat("dinner").eat("supper"); 
 
  LazyMan( 
  "Hank"). 
  sleep( 
  3). 
  eat( 
  "dinner");