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

js事件模型与自定义事件

时间:2016-02-29 14:23:29      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:

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);

 

js事件模型与自定义事件

标签:

原文地址:http://www.cnblogs.com/caihg/p/5227139.html

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