Глобальное событие, которое увидят все подписчики?
Есть кнопки, которые не являются элементами страницы, а являются объектами ЯваСкрипта, часть из них отображены часть нет, в приложении есть возможность пользователю изменить язык. Надо чтоб при смене языка, все кнопки изменили свой текст.
Условия, ни кто не знает сколько кнопок, и где эти кнопки, они сами появляются в разных меню сами исчезают. То есть кнопка должна как то сама понять что ей надо изменить свой текст. Через костыли я и сам знаю как это решить, по этому ни какие библиотеки не предлагать, как и сами костыли. В идеале я хочу повесить на кнопки при создании отслеживатель события Х. а при смене языка генерировать событие Х, которое по замыслу увидит каждая кнопка. Как это реализовать? |
Не проще наоборот сделать?
Т.е. не событие вызывается на каждой кнопке, а каждая кнопка самостоятельно слушает событие на документе. Останется только в нужный момент вызвать событие на документе. |
|
Цитата:
Цитата:
|
Можно сделать как-то так (я в 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')) } } |
Цитата:
|
Nexus,
Да ваш пример сработал Спасибо) //Вешаем в каждой кнопке. this.__someEventListener = function(event){alert("12");}; document.addEventListener('my_Event', this.__someEventListener); //Потом вызываем где угодно. document.dispatchEvent(new CustomEvent('my_Event')); |
<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> |
SuperZen,
У вас в коде как я понял объект известен, button.dispatchEvent(event) там где его вызывают button.addEventListener('click' По этому не годится. В примере выше, который привел Nexus мы используем, document. вызываем и отслеживаем событие на документе, что полностью соответствует условию, где неизвестно ни кому что за кнопки и в каких объектах, но кнопка узнает что событие произошло, так как событие висит не на самой кнопки и на документе. Хотя дополнительные проблемы с удалением кнопки есть, нужно вызывать __removeListners() не достаточно, просто, на неё удалить все ссылки и отдать сборщику мусора. |
нет
|
Часовой пояс GMT +3, время: 12:47. |