Javascript-事件绑定与监听-todolist_js怎么监听list-CSDN博客

本文链接：https://blog.csdn.net/baidu_41656912/article/details/113712123

todolist效果

show todolist

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todolist</title>
    <style>
        body{
            padding: 0 20%;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
        /* input默认为不可见 */
        li input{
            display: none;
        }
        /* 设置edit模式，span（不可见）和 input（默认） 的样式*/
        li.edit span{
            display: none;
        }
        li.edit input{
            display: initial;
        }
       
    </style>
</head>
<body>
    <header>
        <h1>To Do List</h1>
    </header>

    <main>
        <ul id="checklist">
            <li>
                <span>Apples</span>
                <input type="text" value="Apples">
            </li>
            <li>
                <span>Bananas</span>
                <input type="text" value="Bananas">
            </li>
            <li>
                <span>Grapes</span>
                <input type="text" value="Grapes">
            </li>
        </ul>
    </main>
    
    <script src="/script/todolist.js"></script>
</body>
</html>

todolist.js

var checklist = document.getElementById('checklist')
items = checklist.querySelectorAll('li');
inputs = checklist.querySelectorAll('input')

/*分别给需要的元素设置监听事件*/
for(var i = 0;i<items.length;i++)
{
    items[i].addEventListener('click',editItem);
    inputs[i].addEventListener('blur',updatItem);
    inputs[i].addEventListener('keypress',itemKeyPress)
}

// 进入编辑模式的逻辑
function editItem(){
    this.className='edit'
    var input = this.querySelector('input');
    input.focus();//获得聚焦
    input.setSelectionRange(0,input.value.length);//将input内的内容选中，人性化处理
}

//将输入内容更新的逻辑————失去聚焦
function updatItem(){
    // console.log(this.value)
    this.previousElementSibling.innerHTML = this.value;//前一个兄弟元素——span
    this.parentNode.className = '';//父元素
}

//将输入内容更新的逻辑2————enter键盘（AC码13）
function itemKeyPress(event){
    // console.log(event.which)
    if(event.which ===13){
        updatItem.call(this)
    }
}