@AveWycc

Как сделать адекватную обработку event в JS?

Делаю ToDo приложение. Я нажимаю на кнопку Add и добавляю новую задачу, в div кнопки новой задачи создается кнопка Confirm, и после нажатия на Confirm создаются кнопки Show и Delete. То, что я пишу работает, но как по мне, пишу я отвратительно. Как можно сделать нормальную обработку событий?
Сразу скажу, что пишу на чистом JS. Xочу, чтобы было понимание, зачем столько библиотек создали для JS.

main.js
import {findData, findButton, addTask, confirmTask} from './toDo.js'

const data = findData()
const buttonAdd = findButton("#add")
let addInfo = document.querySelector("#addInfo")
let isTaskAdded = true
let buttonConfirm = undefined
let buttonShow = undefined

buttonAdd.onclick = () => {
    if (isTaskAdded) {
        addTask(data, isTaskAdded)
        addInfo.innerHTML = null
        buttonConfirm = findButton("#confirm")
        isTaskAdded = false
        buttonConfirm.onclick = () => {
            confirmTask(data)
            isTaskAdded = true
            buttonShow = document.querySelector(".show")
            buttonShow.onclick = () => {
                console.log(buttonShow)
            }
        }
    } else {
        addInfo.innerHTML = "Confirm your task before you will add new"
        buttonConfirm.onclick = () => {
            confirmTask(data)
            isTaskAdded = true
            buttonShow = document.querySelector(".show")
            buttonShow.onclick = () => {
                console.log(buttonShow)
            }
        }
    }
}


P.S. На console.log(buttonShow) не обращайте внимания, для дебага написал ее.
  • Вопрос задан
  • 97 просмотров
Решения вопроса 2
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега JavaScript
Руководитель frontend направления, предприниматель
1. Слушатели добавляй через addEventListener.
2. Вот это isTaskAdded = false скорее всего можно сократить до isTaskAdded = !isTaskAdded в конце условий.

В остальном, при беглом взгляде выглядит не так уж плохо. Смущают только глобальные переменные. Но тут я не очень объективен, ибо повернут на инкапсуляции и адепт функционального программирования.

А куча библиотек возникла до 2015-го года, когда JS был не просто языком, где куча дерьма, а просто языком в общем и целом из дерьма. Тот же jQuery боготворили, а сейчас это проклятый архаизм. И все в общем перевернулось именно со стандартом ES6\ES2015, а с последующими обновлениями стало только лучше.

В принципе тенденции последних лет можно охарактеризовать, как весьма благоприятные: нормальный PHP, f-строки в Python, окончательная и бесповоротная смерть IE.
Ответ написан
lugindev
@lugindev
Вам не нужно вешать обработчик на каждую кнопку. Когда логика будет чуть сложнее у вас получится монолит с огромной вложенностью. Достаточно одного обработчика на родителе это лучше как с точки производительности так и с точки дальнейшей поддержки кода. Я написал немного кода для вас. Там есть обработчик и другие фишки. Думаю вам будет интересно разобраться с ним. https://jsfiddle.net/edc9qayw/3/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы