I have a bit of a complex situation that I am trying to find a solution for.

I have a web app that has a single module that then imports other classes. These classes handle building the UI and doing MVC-type work.

I have one class that builds a display of DIV elements. The name field in the div is contentEditable and I have some events that I use to allow me to select the text and then set the element to not be contentEditable when the user hits enter or there is a blur event.

All of this works quite well but I want to call back to a class when the DIV element has been edited and I can't figure out how to do it.

So my hierarchy is

• core.js - my main module
• displayList.js - the UI builder imported
• eventFunctions.js - imported by displayList to allow it to assign addListener events
• makeItemNonEditable() - the function that gets called

In the makeItemNonEditable() function I want to call to displayList so that this list knows that the UI element has been updated.

I have created a customEvent and added the appropriate handlers to the displayList class but it doesn't respond to the event. The addListener event is triggered and the event is being propagated as I can respond to it from core.js but not from the imported displayList.js class.

import displayList from './displayList.js';
const objDisplayList = new displayList();

objDisplayList.addEventListener('nameChanged',objDisplayList.updateShipName);

Is there a way to do this or do I need to rework how I am propagating events?

Update

Just answering some of the questions below.

The custom event is being declared in eventFunctions.js and triggered as part of a blur event on the DIV the user is editing. So if the user causes a blur event or hits Enter then the nameChanged event is sent

const nameChange = new Event('nameChanged');

function makeItemNonEditable(event) {

    // set the item's contentEditable prop to false
    event.target.contentEditable = false;
    event.target.dispatchEvent(nameChange);
    
}

I am using the target of the blur event as the src of the event

makeItemNonEditable is called from an eventListener attached to the DIV when it is created

// first the name field
let nameField = lastItem.querySelector('.displayName');
nameField.addEventListener('click', makeItemEditable);
nameField.addEventListener('blur', makeItemNonEditable);
nameField.addEventListener('keydown', testForEnter);

The display object creates the div and then attaches the eventListeners to it.

I have tried several different methods to try to get the displayList class as a target. I have extended the EventTarget class and also added addEventListener methods to the class.

At no point, and with no method I try, does the class get added as an eventListener. So when I run my app in a browser and use the getAllEventListeners method in the console I can see that the custom event is being added and my test hooks to it are there but not for the displayList class.