在Class中完成的自定义事件

时间:2013-11-22 10:16:34

标签: javascript jquery class custom-event

以下两个代码示例在面试时提供给我,我无法使其成功:

//CODE1:
var e = new Event();

e.on('myevent', function (a, b) {
    console.log(a + ' ' + b);
});

e.trigger('myevent', ['Hello', 'world']);


//CODE2:  
e.on('hello', function() {
    console.log('Hello');
    this.trigger('world');
}).on('world', function() {
    console.log('World');
}).trigger('hello');

因此无法修改给定的两个代码,名为Event() Class 应该可以工作,因此两个代码示例都会输出“Hello world”。 现在,我不是要求一个完整的答案。我对 Javascript 中的 Classes 自定义事件并不擅长。我知道基础知识,但如果你知道我的意思,它还不在我手中。我一直在寻找教程,但我需要有人“ smarter ”告诉我应该从哪里开始,为我的问题提供一些好的教程链接。

谢谢!

2 个答案:

答案 0 :(得分:2)

.on()用于将事件绑定到元素。您无法将事件绑定到事件,请参阅示例代码:

$('div').on('hello', function() {
    console.log('Hello');
    $(this).trigger('world');
}).on('world', function() {
    console.log('World');
}).trigger('hello');

答案 1 :(得分:1)

演示http://jsfiddle.net/uAQn9/

代码:

function Event() {

}

Event.prototype = {

  trigger:function(eventName, arParam) {
    $(window).trigger(eventName, arParam);
  },

  on: function(eventName, cb) {
    var event = this;
    $(window).on(eventName, function(e) {
      var args = Array.prototype.slice.call(arguments);
      cb.apply(event, args.slice(1));
    });
    return this;
  }
}

//CODE1:
var e = new Event();

e.on('myevent', function (a, b) {
    console.log(a + ' ' + b);
});

e.trigger('myevent', ['Hello', 'world']);


//CODE2:  
e.on('hello', function() {
    console.log('Hello');
    this.trigger('world');
}).on('world', function() {
    console.log('World');
}).trigger('hello');