Система событий в Mithril

Mithril — это легковесный фреймворк для создания одностраничных приложений на JavaScript, ориентированный на высокую производительность и минимальный размер. Важной частью любого UI-фреймворка является система событий, которая обеспечивает интерактивность компонентов. В Mithril обработка событий реализована простым и эффективным образом, соответствующим принципам виртуального DOM и реактивного рендеринга.

Обработчики событий

В Mithril события добавляются непосредственно к элементам виртуального DOM через объект атрибутов при вызове m():

m('button', { onclick: () => console.log('Нажата кнопка') }, 'Кликни меня')

Ключевые моменты:

onclick, oninput, onchange, onmouseover и другие события HTML напрямую поддерживаются.
Значение атрибута — функция-обработчик, вызываемая при соответствующем событии.
Контекст вызова функции (this) по умолчанию не привязан к компоненту. Если необходим доступ к внутренним данным компонента, лучше использовать стрелочные функции или bind.

События и компоненты

Обработчики событий можно использовать внутри компонентов Mithril:

const Counter = {
    count: 0,
    view() {
        return m('div', [
            m('p', `Счёт: ${this.count}`),
            m('button', { onclick: () => { this.count++ } }, 'Увеличить')
        ])
    }
}

Особенности:

При изменении состояния внутри обработчика, Mithril автоматически перерисовывает виртуальный DOM.
Использование стрелочной функции сохраняет контекст компонента, что упрощает доступ к его свойствам.
Для сложных компонентов с большим количеством событий рекомендуется хранить обработчики как методы объекта, чтобы поддерживать читаемость кода.

События с параметрами

Передача параметров в обработчик осуществляется через замыкания:

const listItemClick = (id) => () => console.log(`Элемент ${id} выбран`)

m('ul', [
    [1, 2, 3].map(id => m('li', { onclick: listItemClick(id) }, `Элемент ${id}`))
])

Создание функций-замыканий предотвращает преждевременный вызов обработчика.
Такой подход упрощает динамическую генерацию элементов с индивидуальными событиями.

Управление контекстом события

Mithril передаёт объект события как первый аргумент в обработчик:

m('input', {
    oninput: (e) => console.log(e.target.value)
})

Можно использовать стандартные методы preventDefault() и stopPropagation():

m('form', {
    onsubmit: (e) => {
        e.preventDefault()
        console.log('Форма отправлена')
    }
})

Это позволяет полностью контролировать поведение элементов без сторонних библиотек.

Делегирование событий

Mithril не предоставляет встроенной системы делегирования событий, как в jQuery. Вместо этого рекомендуется использовать обработку событий на уровне контейнера и проверку event.target:

m('ul', {
    onclick: (e) => {
        if(e.target.tagName === 'LI') {
            console.log(`Выбран ${e.target.textContent}`)
        }
    }
}, [
    m('li', 'Элемент 1'),
    m('li', 'Элемент 2'),
    m('li', 'Элемент 3')
])

Этот подход уменьшает количество отдельных обработчиков и повышает производительность при больших списках элементов.

Асинхронные события

Обработчики могут быть асинхронными функциями, что удобно для работы с API:

m('button', {
    onclick: async () => {
        const data = await fetch('/api/data').then(res => res.json())
        console.log(data)
    }
}, 'Загрузить данные')

Mithril корректно обновляет интерфейс после асинхронных операций, если изменения состояния происходят внутри обработчика.

Совместимость с кастомными событиями

Mithril позволяет использовать пользовательские события через стандартный механизм dispatchEvent:

const el = m('div', { id: 'custom' })
el.dom.addEventListener('custom', (e) => console.log(e.detail))
el.dom.dispatchEvent(new CustomEvent('custom', { detail: 'данные' }))

Такой метод полезен для интеграции с внешними библиотеками и сторонними компонентами.