Creating and triggering events

    This is the child div

    style="background-color: #a9a9a9; padding: 10px; position: relative; top: 5px;"

    Custom events

    Creating events

    Events can be created with the Event constructor as follows:

                        // The constructor is supported in most modern browsers (with Internet Explorer being the exception).
                        var event = new Event('CatSays');
                        // Listen for the event.
                        element.addEventListener('CatSays', function (e) {
                            // console.log('Meow');
                            // console.log(e);
                        }, false);
                        // Dispatch the event.

    Adding custom data – CustomEvent

    To add more data to the event object, the CustomEvent interface exists. For example, the event could be created as follows:

                        var event = new CustomEvent('cat', { 'detail': elem.dataset.time });

    This will then allow accessing the additional data in the event listener:

                        function eventHandler(e) {
                            console.log('The time is: ' + e.detail);


    Method overview

    The DOM CustomEvent are events initialized by an application for any purpose. void initCustomEvent(in DOMString type, in boolean canBubble, in boolean cancelable, in any detail);

    CustomEvent example usage

                        // add an appropriate event listener
                        obj.addEventListener("cat", function(e) { process(e.detail) });
                        // create and dispatch the event
                        var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});

    Original Source: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent