[SOLVED] Defining and triggering custom events on custom module in YUI3

Defining and triggering custom events on custom module in YUI3

This is how we can create a custom module in YUI3,

<script type="text/javascript">
    YUI.add('my-module', function (Y) {
       // Write your module code here, and make your module available on the Y
       // object if desired.
       Y.MyModule = {
           sayHello: function () {
               console.log('Hello!');
           }
       };
    });
</script>

But now I would like to, on this module, define some custom events and later trigger them, I just couldn't find any information about this on the YUI3 official website.

How can we actually do this?

Solution

Custom events are actually pretty important throughout YUI. This documentation page describes them in detail: http://yuilibrary.com/yui/docs/event-custom/. Read this page and some of the examples in the sidebar.

The easiest and simplest way to fire a custom event is to fire it from the Y, as in Y.fire("myEvent"). However, if you want to fire an event from your object, you would need to give your object the EventTarget API and call this.fire("myEvent"). Most people do this by extending Y.Base, which includes Y.EventTarget. See http://yuilibrary.com/yui/docs/base/ -- if you extend Base, you get a fire() method, the ability to listen for events with on() or after(), plus lots of other goodies.