Глобальное событие, которое увидят все подписчики?

[RX200]

Есть кнопки, которые не являются элементами страницы, а являются объектами ЯваСкрипта, часть из них отображены часть нет, в приложении есть возможность пользователю изменить язык. Надо чтоб при смене языка, все кнопки изменили свой текст.
Условия, ни кто не знает сколько кнопок, и где эти кнопки, они сами появляются в разных меню сами исчезают. То есть кнопка должна как то сама понять что ей надо изменить свой текст.
Через костыли я и сам знаю как это решить, по этому ни какие библиотеки не предлагать, как и сами костыли.
В идеале я хочу повесить на кнопки при создании отслеживатель события Х. а при смене языка генерировать событие Х, которое по замыслу увидит каждая кнопка. Как это реализовать?

[Nexus]

Не проще наоборот сделать?
Т.е. не событие вызывается на каждой кнопке, а каждая кнопка самостоятельно слушает событие на документе. Останется только в нужный момент вызвать событие на документе.

[SuperZen]

https://developer.mozilla.org/en-US/...nt/CustomEvent

[RX200]

Не проще наоборот сделать?

Просще о чем я и написал.

В идеале я хочу повесить на кнопки при создании отслеживатель события Х

[Nexus]

Можно сделать как-то так (я в js не особо умею)

class Button {
    getDOMInstance() {
        if (!!this.DOMInstance)
            return this.DOMInstance;

        this.DOMInstance = document.createElement('button');
        this.__setListeners();

        return this.DOMInstance;
    }

    renred() {
        document.body.appendChild(
            this.getDOMInstance()
        );
    }

    __setListeners() {
        document.addEventListener('some-event', this.__someEventListener);
    }

    __someEventListener(e) {
        alert(`${e.type} was triggered`);
    }

    __removeListners() {
        document.removeEventListener('some-event', this.__someEventListener);
    }
}

class LanguageSwitcher {
    __onChange() {
        document.dispatchEvent(new CustomEvent('some-event'))
    }
}

[RX200]

https://developer.mozilla.org/en-US/...nt/CustomEvent

Не работает. откуда взять в примере по ссылке obj? Когда мы вешаем слушатель это делаем внутри объекта и он нам известен, но как потом вызвать его?

[RX200]

Nexus,
Да ваш пример сработал Спасибо)

//Вешаем в каждой кнопке.
this.__someEventListener = function(event){alert("12");};
document.addEventListener('my_Event', this.__someEventListener);
//Потом вызываем где угодно.
document.dispatchEvent(new CustomEvent('my_Event'));

[SuperZen]

<div id="app"></div>
<script>
  let app = document.getElementById('app')

  let button = document.createElement('button')
  button.type = 'button'
  button.innerText = 'Кнопка'
  button.addEventListener('click', function () {
    var event = new CustomEvent("i18n", {
      detail: {
        label: 'Button'
      }
    });
    button.dispatchEvent(event)
  })

  button.addEventListener('i18n', function (e) {
    button.innerHTML = e.detail.label
  })
  app.appendChild(button)
</script>

[RX200]

SuperZen,
У вас в коде как я понял объект известен, button.dispatchEvent(event) там где его вызывают button.addEventListener('click'
По этому не годится. В примере выше, который привел Nexus мы используем, document. вызываем и отслеживаем событие на документе, что полностью соответствует условию, где неизвестно ни кому что за кнопки и в каких объектах, но кнопка узнает что событие произошло, так как событие висит не на самой кнопки и на документе. Хотя дополнительные проблемы с удалением кнопки есть, нужно вызывать __removeListners() не достаточно, просто, на неё удалить все ссылки и отдать сборщику мусора.

[SuperZen]

нет