Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.12.2018, 13:24
Аспирант
Отправить личное сообщение для RX200 Посмотреть профиль Найти все сообщения от RX200
 
Регистрация: 06.02.2011
Сообщений: 54

Глобальное событие, которое увидят все подписчики?
Есть кнопки, которые не являются элементами страницы, а являются объектами ЯваСкрипта, часть из них отображены часть нет, в приложении есть возможность пользователю изменить язык. Надо чтоб при смене языка, все кнопки изменили свой текст.
Условия, ни кто не знает сколько кнопок, и где эти кнопки, они сами появляются в разных меню сами исчезают. То есть кнопка должна как то сама понять что ей надо изменить свой текст.
Через костыли я и сам знаю как это решить, по этому ни какие библиотеки не предлагать, как и сами костыли.
В идеале я хочу повесить на кнопки при создании отслеживатель события Х. а при смене языка генерировать событие Х, которое по замыслу увидит каждая кнопка. Как это реализовать?
Ответить с цитированием
  #2 (permalink)  
Старый 20.12.2018, 13:52
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,719

Не проще наоборот сделать?
Т.е. не событие вызывается на каждой кнопке, а каждая кнопка самостоятельно слушает событие на документе. Останется только в нужный момент вызвать событие на документе.
Ответить с цитированием
  #3 (permalink)  
Старый 20.12.2018, 13:52
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

https://developer.mozilla.org/en-US/...nt/CustomEvent
Ответить с цитированием
  #4 (permalink)  
Старый 20.12.2018, 13:56
Аспирант
Отправить личное сообщение для RX200 Посмотреть профиль Найти все сообщения от RX200
 
Регистрация: 06.02.2011
Сообщений: 54

Сообщение от Nexus
Не проще наоборот сделать?
Просще о чем я и написал.
Сообщение от RX200
В идеале я хочу повесить на кнопки при создании отслеживатель события Х
Ответить с цитированием
  #5 (permalink)  
Старый 20.12.2018, 14:07
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,719

Можно сделать как-то так (я в 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'))
    }
}
Ответить с цитированием
  #6 (permalink)  
Старый 20.12.2018, 14:11
Аспирант
Отправить личное сообщение для RX200 Посмотреть профиль Найти все сообщения от RX200
 
Регистрация: 06.02.2011
Сообщений: 54

Сообщение от SuperZen
https://developer.mozilla.org/en-US/...nt/CustomEvent
Не работает. откуда взять в примере по ссылке obj? Когда мы вешаем слушатель это делаем внутри объекта и он нам известен, но как потом вызвать его?
Ответить с цитированием
  #7 (permalink)  
Старый 20.12.2018, 14:22
Аспирант
Отправить личное сообщение для RX200 Посмотреть профиль Найти все сообщения от RX200
 
Регистрация: 06.02.2011
Сообщений: 54

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

Последний раз редактировалось RX200, 20.12.2018 в 14:26.
Ответить с цитированием
  #8 (permalink)  
Старый 20.12.2018, 14:29
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

<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>
Ответить с цитированием
  #9 (permalink)  
Старый 20.12.2018, 14:41
Аспирант
Отправить личное сообщение для RX200 Посмотреть профиль Найти все сообщения от RX200
 
Регистрация: 06.02.2011
Сообщений: 54

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

Последний раз редактировалось RX200, 20.12.2018 в 15:21.
Ответить с цитированием
  #10 (permalink)  
Старый 20.12.2018, 14:46
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

нет
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
событие, которое срабатывает при изменении DOM структуры amigo* Events/DOM/Window 30 11.04.2017 13:39
Как назначить событие при фокусе на все ссылки —сразу производить переход (по ссылке) developer Элементы интерфейса 4 27.10.2013 13:35
Событие при наведение мыши, которое раскроет содержимое блока (элемента)... aklak Элементы интерфейса 3 27.03.2012 11:30
Название ячейки таблицы Questioner Общие вопросы Javascript 6 16.02.2011 09:58
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37