Глобальное событие, которое увидят все подписчики?
Есть кнопки, которые не являются элементами страницы, а являются объектами ЯваСкрипта, часть из них отображены часть нет, в приложении есть возможность пользователю изменить язык. Надо чтоб при смене языка, все кнопки изменили свой текст.
Условия, ни кто не знает сколько кнопок, и где эти кнопки, они сами появляются в разных меню сами исчезают. То есть кнопка должна как то сама понять что ей надо изменить свой текст. Через костыли я и сам знаю как это решить, по этому ни какие библиотеки не предлагать, как и сами костыли. В идеале я хочу повесить на кнопки при создании отслеживатель события Х. а при смене языка генерировать событие Х, которое по замыслу увидит каждая кнопка. Как это реализовать? |
Не проще наоборот сделать?
Т.е. не событие вызывается на каждой кнопке, а каждая кнопка самостоятельно слушает событие на документе. Останется только в нужный момент вызвать событие на документе. |
|
Цитата:
Цитата:
|
Можно сделать как-то так (я в 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:26. |