Tengo una situación un poco compleja para la que estoy tratando de encontrar una solución.

Tengo una aplicación web que tiene un solo módulo que luego importa otras clases. Estas clases manejan la construcción de la interfaz de usuario y el trabajo de tipo MVC.

Tengo una clase que crea una pantalla de elementos DIV. El campo de nombre en el div es contentEditable y tengo algunos eventos que uso para permitirme seleccionar el texto y luego configurar el elemento para que no sea contentEditable cuando el usuario presiona enter o hay un evento de desenfoque.

Todo esto funciona bastante bien, pero quiero volver a llamar a una clase cuando se ha editado el elemento DIV y no sé cómo hacerlo.

Entonces mi jerarquía es

• core.js - mi módulo principal
• displayList.js: el generador de interfaz de usuario importado
• eventFunctions.js: importado por displayList para permitirle asignar eventos addListener
• makeItemNonEditable() - la función que se llama

En la función makeItemNonEditable() quiero llamar a displayList para que esta lista sepa que el elemento de la interfaz de usuario se ha actualizado.

Creé un evento personalizado y agregué los controladores apropiados a la clase displayList pero no responde al evento. El evento addListener se activa y el evento se propaga, ya que puedo responder desde core.js pero no desde la clase displayList.js importada.

 import displayList from './displayList.js'; const objDisplayList = new displayList(); objDisplayList.addEventListener('nameChanged',objDisplayList.updateShipName);

¿Hay alguna manera de hacer esto o necesito volver a trabajar en cómo estoy propagando eventos?

Actualizar

Solo respondiendo algunas de las preguntas a continuación.

El evento personalizado se declara en eventFunctions.js y se activa como parte de un evento de desenfoque en el DIV que el usuario está editando. Entonces, si el usuario provoca un evento borroso o presiona Enter, se envía el evento nameChanged

 const nameChange = new Event('nameChanged');

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

Estoy usando el destino del evento de desenfoque como el src del evento

makeItemNonEditable se llama desde un eventListener adjunto al DIV cuando se crea

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

El objeto de visualización crea el div y luego le adjunta los eventListeners.

He probado varios métodos diferentes para tratar de obtener la clase displayList como objetivo. Extendí la clase EventTarget y también agregué métodos addEventListener a la clase.

En ningún momento, y sin ningún método que intente, la clase se agrega como eventListener. Entonces, cuando ejecuto mi aplicación en un navegador y uso el método getAllEventListeners en la consola, puedo ver que el evento personalizado se agrega y mis enlaces de prueba están allí, pero no para la clase displayList.