给why自己看的ToDoList

    // 0. 全局变量
const dataList = [
    {
        id: 1,
        text: '吃饭',
        status: true,
        edit: false,
    },
    {
        id: 2,
        text: '睡觉',
        status: false,
        edit: false,
    },
    {
        id: 3,
        text: '打豆豆',
        status: true,
        edit: false,
    }
]
// 0. 获取标签
const todoList = document.querySelector('.todo-list')   // ul 内部需要渲染 li(数据)
const todoApp = document.querySelector('.todoapp')      // 当前案例的共同父级, 需要利用事件委托
const toggleAll = document.querySelector('.toggle-all') // 左上角 全选按钮
const todoCount = document.querySelector('.todo-count strong')  // 左下角未完成数量
const clearCompleted = document.querySelector('.clear-completed')   // 右下角清空已完成
const newTodo = document.querySelector('.new-todo') // 顶部的新增 todo 输入框
let flag = false

//1、页面渲染函数
function bindHtml(dataList) {
    let str = ""
    for(let i = 0; i < dataList.length; i++){
        str += `
        <li class="${dataList[i].status?"completed":""}">
            <div class="view">
                <input class="toggle" data-id="${dataList[i].id}" type="checkbox" ${dataList[i].status?"checked":""}>
                <label class="label">${dataList[i].text}</label>
                <button class="destroy" data-id="${i}"></button>
            </div>
            <input class="edit" data-old="${dataList[i].text}" value="${dataList[i].text}" data-id="${dataList[i].id}">
        </li>
        `
    }
    todoList.innerHTML = str

    let count = 0
    for(let n = 0; n < dataList.length; n++){
        dataList[n].status && count++
    }
    toggleAll.checked = count === dataList.length

    todoCount.innerHTML = dataList.length - count
    clearCompleted.style.display = count?"block":"none"
}
bindHtml(dataList)

//2、事件委托
todoApp.onclick = function(e) {
    if(e.target.className === "toggle-all"){
        for(let i = 0; i < dataList.length; i++){
            dataList[i].status = e.target.checked
        }
        bindHtml(dataList)
    }
    if(e.target.className === "toggle"){
        for(let i = 0; i < dataList.length; i++){
            if(e.target.dataset.id - 0 === dataList[i].id){
                dataList[i].status = e.target.checked
            }
        }
        bindHtml(dataList)
    }
    if(e.target.className === 'destroy'){
        if(!confirm('您确定要删除吗？')) return
       dataList.splice(e.target.dataset.id,1)
       bindHtml(dataList)
    }
}

//3、键盘事件
newTodo.onkeydown = function(e) {
    if(e.key !== "Enter") return
    if(e.target.value === "") return
    const obj = {
        id:dataList.length + 1,
        text:e.target.value,
        status:false,
        edit:false
    }
    dataList.push(obj)
    bindHtml(dataList)

    e.target.value = ""
}

//4、利用事件委托完成双击
todoApp.ondblclick = function(e) {
    if(e.target.className === "label"){
        e.target.parentNode.parentNode.classList.add('editing')
        flag = true
    }
}
//5、利用事件委托完成编辑框的编辑
document.onkeyup = function(e) {
    if(!flag) return
    if(e.key === "Escape"){
        e.target.parentNode.classList.remove('editing')
        e.target.value = e.target.dataset.old
        flag = false
    }
    if(e.key === "Enter"){
        e.target.parentNode.classList.remove('editing')
        for(let i = 0; i < dataList.length; i++){
            if(e.target.dataset.id - 0 === dataList[i].id){
                dataList[i].text = e.target.value
            }
        }
        bindHtml(dataList)

        flag = false
    }
}

//6、三个按钮
let filters = document.querySelector('.filters')
filters.onclick = function(e) {
    if(e.target.className === "selected"){
        bindHtml(dataList)
    }
    if(e.target.className === "active"){
        let newArr = []
        for(let i = 0; i < dataList.length; i++){
            if(!dataList[i].status){
                newArr.push(dataList[i])
            }
        }
        bindHtml(newArr)
    }
    if(e.target.className === "completed"){
        let newArr = []
        for(let i = 0; i < dataList.length; i++){
            if(dataList[i].status){
                newArr.push(dataList[i])
            }
        }
        bindHtml(newArr)
    }
}