代码之家  ›  专栏  ›  技术社区  ›  Daniel Szabo

我可以用Javascript为我创建的对象创建自定义事件吗?

  •  10
  • Daniel Szabo  · 技术社区  · 15 年前

    假设我有一个带有返回自身的成员函数的对象:

    /* -- Object 1 -- */
    function Object1(){
        this.me      = new Image(10,10);
        this.me.src  = "someImgUrl.jpg";
        this.publish = function(){
            return this.me;
        }
    }
    

    生产中:

    var Obj1 = new Object1();
    document.body.appendChild( Obj1.publish() );
    

    现在,假设我想创建一个事件,在调用对象的publish()方法时,但在返回图像后触发(类似于“onPublished()”事件)。例如,将图像尺寸更改为100x100。我该如何创建它,在哪里“附加”它?

    如果我说得不够清楚,请告诉我。这是我能想到的最简单的演示。

    2 回复  |  直到 11 年前
        1
  •  8
  •   Robert MacLean    13 年前

    一个简单的例子:

    function Object1() {
        'use strict';
    
        this.me = new Image(10, 10);
        this.me.src = "someImgUrl.jpg";
        this.publish = function() {
            if (typeof this.onPublish === "function") {
                setTimeout(this.onPublish, 1);
            }
    
            return this.me;
        };
    }
    
    var Obj1 = new Object1();
    Obj1.onPublish = function() {
      // do stuff
    };
    
    Obj1.publish();
    
        2
  •  0
  •   Tengiz    13 年前

    或者,您可以使用一些第三方框架(例如 bob.js )在对象上定义自定义事件。有两种方法,但我只展示一种:

    var DataListener = function() { 
        var fire = bob.event.namedEvent(this, 'received'); 
        this.start = function(count) { 
            for (var i = 0; i < count; i++) { 
                fire(i + 1); 
            } 
        }; 
    }; 
    var listener = new DataListener(); 
    listener.add_received(function(data) { 
        console.log('data received: ' + data); 
    }); 
    listener.start(5); 
    // Output: 
    // data received: 1 
    // data received: 2 
    // data received: 3 
    // data received: 4 
    // data received: 5