Create "on" event listener on javascript custom object

Question

How can I add on event listener for custom object.

For example:

(function () {
    this.EmojiPicker = (function () {
        function EmojiPicker(options) {
            // ...
        }

        EmojiPicker.prototype.test = function () {
            //...
        };

        return EmojiPicker;

    })();
}).call(this);

I want to add

let emojiPicker = new EmojiPicker();

emojiPicker.on("change", function () {
    //
});

score 2 · Accepted Answer · answered Nov 27 '20 at 01:42

I have a simple example modified from you code. See if this can help.

The main idea is to trigger an event by $(emojiPicker).trigger('change');, so that you can receive with $(emojiPicker).on("change", function () {});

<html>
<head>
    <script type="text/javascript" src="./jquery-1.7.1.js"></script>
    <script>
    (function () {
        
        this.EmojiPicker = (function () {
            function EmojiPicker(options) {
                // ...
            }

            EmojiPicker.prototype.test = function () {
                //...
                $(emojiPicker).trigger('change');
            };

            return EmojiPicker;

        })();
        
        
        let emojiPicker = new EmojiPicker();

        $(emojiPicker).on("change", function () {
            alert("triggered");
        });
    }).call(this);
        
    </script>
</head>
<body>
</bofy>
</html>

More information from Custom events in jQuery?

Create "on" event listener on javascript custom object

1 Answers1