js事件模型与自定义事件

Posted 2020-06-17

javascript 一个最简单的事件模型，需要有事件绑定与触发，也许还要有事件删除。

 1 var eventModel = {
 2   list: {},
 3 
 4   bind: function () {
 5     var args = [].slice.apply(arguments),
 6     type = args[0],
 7     handlers = args.slice(1);
 8 
 9     if (typeof type === ‘string‘ && handlers.length > 0) {
10       for (var i = 0; i < handlers.length; i++) {
11         if (typeof handlers[i] === ‘function‘) {
12           if (!this.list[type]) {
13             this.list[type] = [];
14           }
15           this.list[type].push(handlers[i]);
16         }
17       }
18     }
19   },
20 
21   trigger: function () {
22     var arguments = [].slice.apply(arguments),
23     type = arguments[0],
24     args = arguments[1] instanceof Array && !arguments[2] ? arguments[1] : arguments.slice(1),
25     handlers = this.list[type];
26 
27     for (var i = 0; i < handlers.length; i++) {
28       handlers[i].apply(this, args.splice(0, handlers[i].length));
29     }
30   }
31 };

其中主要实现了bind（绑定事件）与 trigger (触发事件)。对同一事件名称，可以绑定多个事件处理函数；并按照绑定的顺序依次触发。

args.splice(0, handlers[i].length) 触发时的传参

使用：

eventModel.bind(‘myevent1‘, function (a) {
  console.log(a);  // 1
}, function(b) {
  console.log(b);  // 2
}, function(c, d) {
  console.log(c + ‘ + ‘ + d);  // a+b
});

eventModel.bind(‘myevent2‘, function (x) {
  console.log(x);
}, function(y) {
  console.log(y);
});

eventModel.bind(‘myevent1‘, function (e) {
  console.log(e);  // 50
});


eventModel.trigger(‘myevent1‘, 1,2,‘a‘,‘b‘, 50);