WinJS Custom Control Events "invalid argument"

Question

I'm creating a custom WinJS control with an event listener. For simplicity, this example should fire an event whenever it is tapped.

This is created with the markup:

<div class="alphaNavBar" data-win-control="MobMan.Controls.AlphaNavBar"></div>

The control is implemented here. It throws an "invalid argument" exception at the dispatchEvent(...) line.

(function () {
    var alphaNavBar = WinJS.Class.define(function (el, options) {
        // Create control
        var self = this;
        this._element = el || document.createElement("div");
        this._element.winControl = this;

        this._element.innerText = "Hello World!";
        this._selection = false;

        // Listen for tap
        this._element.addEventListener("MSPointerDown", function (evt) {
            // Toggle selection
            self._selection = !self._selection;

            // Selection changed, fire event
            // Invalid argument here
            self._element.dispatchEvent("mySelectionChanged", { selection: self._selection });
            // Invalid argument here
        });
    });

    // Add to global namespace
    WinJS.Namespace.define("MobMan.Controls", {
        AlphaNavBar: alphaNavBar
    });
    
    // Mixin event properties
    WinJS.Class.mix(MobMan.Controls.AlphaNavBar, WinJS.Utilities.createEventProperties("mySelectionChanged"), WinJS.UI.DOMEventMixin);
})();

This event is listened to by:

var alphaNavBar = document.querySelector(".alphaNavBar");
alphaNavBar.addEventListener("mySelectionChanged", function (evt) {
    // Should fire when alphaNavBar is tapped
    debugger;
});

What am I doing wrong here?

Answer 1

I posted my question here as well and got an answer modifying the event dispatch like so:

// Listen for tap
this._element.addEventListener("MSPointerDown", function (evt) {
    // Toggle selection
    this._selection = !this._selection;

    // Create the event.
    var _event = document.createEvent('customevent');

    // Define that the event name is 'mySelectionChanged' and pass details.
    _event.initCustomEvent('mySelectionChanged', true, true, { selection: this._selection });

    // Selection changed, fire event
    this.dispatchEvent(_event);
});

This was able to trigger the event correctly for me. Still not sure what I was doing wrong before, but it is fixed now.