Question

45

How to raise a custom event from within a JavaScript object

rated 0 times [ 50] [ 5] / answers: 1 / hits: 18536 / 13 Years ago, fri, july 29, 2011, 12:00:00

I am trying to get a better understanding of object orientated techniques in JavaScript.

I have the following (trivial) object:

function CustomObject () {

    this.size = 1;

};



CustomObject.prototype.addSize = function () {

    this.size += 1;

    if(this.size > 5) {

        //Raise custom Event

    }

};

And I am instating it like this.

   var myObject = new CustomObject();

    myObject.addSize();



    // Add listener for custom event from with in my Custom Object.

    // Something like this....

    myObject.addEventListener("CustomEvent", handelCustomEvent, false);

    

    function handelCustomEvent() {}

How do I raise a custom event in my custom object and then listen to that event in the parent? Is this kind of thing even possible in JavaScript?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

miles

Add To Favorites

Follow

Total Points: 256

Total Questions: 111

Total Answers: 104

Location: Benin

Member since Fri, Mar 24, 2023

1 Year ago

miles questions

1 TypeError: Cannot read property 'then' of undefined Jest and Nest

Sun, Jan 30, 22, 00:00, 2 Years ago

1 Example: Doughnut | Error: Uncaught ReferenceError: Utils is not defined

Tue, Apr 27, 21, 00:00, 3 Years ago

1 How to block typing e and - characters in React Hook Form input?

Fri, Apr 9, 21, 00:00, 3 Years ago

1 Environment variables in svelte + rollup

Mon, Jun 29, 20, 00:00, 4 Years ago

1 How to calculate the time left in days, hours, minutes, and seconds left to reach certain day?

Mon, Jun 22, 20, 00:00, 4 Years ago

View All

answered 13 Years ago jonrened · Accepted Answer

You can do it by making your custom event class which has listener and trigger related functions. I found a good article about this. The class is implemented like this:

//Copyright (c) 2010 Nicholas C. Zakas. All rights reserved.

//MIT License



function EventTarget(){

    this._listeners = {};

}



EventTarget.prototype = {



    constructor: EventTarget,



    addListener: function(type, listener){

        if (typeof this._listeners[type] == undefined){

            this._listeners[type] = [];

        }



        this._listeners[type].push(listener);

    },



    fire: function(event){

        if (typeof event == string){

            event = { type: event };

        }

        if (!event.target){

            event.target = this;

        }



        if (!event.type){  //falsy

            throw new Error(Event object missing 'type' property.);

        }



        if (this._listeners[event.type] instanceof Array){

            var listeners = this._listeners[event.type];

            for (var i=0, len=listeners.length; i < len; i++){

                listeners[i].call(this, event);

            }

        }

    },



    removeListener: function(type, listener){

        if (this._listeners[type] instanceof Array){

            var listeners = this._listeners[type];

            for (var i=0, len=listeners.length; i < len; i++){

                if (listeners[i] === listener){

                    listeners.splice(i, 1);

                    break;

                }

            }

        }

    }

};

But, as the writer said this class isn't complete. It has some limitations. So I recommend using jQuery instead. You can use your custom event easily with bind() and trigger() function. There's a good thread about this. If you see Custom events in jQuery?, you'll find out how to implement it with jQuery.