js代码实现简易备忘录功能

 

 

文章目录

• 一、需求
• 二、代码解析
• 总结

 

 

一、需求

在页面输入栏中输入备忘内容，点击添加之后，添加到下方，点击添加的内容，出现删除样式，再次点击可取消。

二、使用步骤

1.HTML结构

<input type="text" id="content">
    <input type="button" value="提交备忘录" id="submit">
    <ol>

    </ol>

 

2.js代码

  2.1将输入框内容添加到ol中

 submit.addEventListener("click",function(){
            li=document.createElement("li");
            li.innerHTML=`${content.value}`;
            ol.appendChild(li);
            content.value="";
        });

 

 

 

 

2.2添加删除效果

   ol.addEventListener("click",function(event){
            event.target.className=="choose"?
            event.target.className="":event.target.className="choose";
        })

 

---

总结

用到事件委托event.target，就不用给每个子对象绑定监听了，方便~