Event is undefined in afterrender

Question

I have a lightning component that I am adding a click event listener as part of the afterRender. The problem I have is that I want it to fire an event but the event is coming back as undefined.
here is my afterRender

({
afterRender : function(cmp, helper){
    var viewDiv = document.getElementById(cmp.get("v.parentDiv")+"-view");
    var editDiv = document.getElementById(cmp.get("v.parentDiv")+"-edit");


    viewDiv.addEventListener("click", function () {
        viewDiv.classList.add("slds-hide");
        editDiv.classList.remove("slds-hide");
        editDiv.classList.add("ux-mode-edit");

        var myEvent = $A.get("e.c:myEvent");
        var myEventParams = cmp.get("v.myEventParams");
        var params = "";
        for (var i = 0; i < myEventParams.length; i++) {
            params += "\"" + myEventParams[i].label + "\" : \"" + myEventParams[i].value + "\",";
        }
        params = params.slice(0, params.length - 1);

        myEvent.setParams({
            "eventType": cmp.get("v.myEventType"),
            "params": { params }
        });
        myEvent.fire();

    }, false);
}
})

here is my event

<aura:event type="APPLICATION"  >
     <aura:attribute name="params" type="Object"/>
     <aura:attribute name="eventType" type="String"/>
</aura:event>

the problem is in the line var myEvent = $A.get("e.c:myEvent");. $A.get("e.c:myEvent") cannot be found. I have tried a couple of different events and get the same thing with all of them.

Answer 1

You need to use $A.getCallback in order to create a handler that can interact with Aura. In addition, converting the list to an object is incorrect. Here's a corrected version of your code:

({
    afterRender : function(cmp, helper){
        var viewDiv = document.getElementById(cmp.get("v.parentDiv")+"-view");
        var editDiv = document.getElementById(cmp.get("v.parentDiv")+"-edit");
        viewDiv.addEventListener("click", $A.getCallback(function () {

            viewDiv.classList.add("slds-hide");
            editDiv.classList.remove("slds-hide");
            editDiv.classList.add("ux-mode-edit");

            var myEvent = $A.get("e.c:myEvent");
            var myEventParams = cmp.get("v.myEventParams");
            var params = myEventParams.reduce(
                function(map, obj) { 
                    map[obj.label] = obj.value; 
                    return map;
                }, {});
            myEvent.setParams({
                "eventType": cmp.get("v.myEventType"),
                "params": params
            });
            myEvent.fire();

        }), false);
    }
})

---

Make sure that you register your event in the component code in order to gain access to it.

<aura:registerEvent name="myEvent" type="c:myEvent" />