事件委托修改留言板

最新推荐文章于 2022-06-27 15:21:21 发布

qh19940911

最新推荐文章于 2022-06-27 15:21:21 发布

阅读量191

点赞数

本文链接：https://blog.youkuaiyun.com/qh19940911/article/details/89682131

版权

事件委托修改留言板

<body>
      <ul id="lt"></ul>
      <textarea name="" id="fsk" cols="30" rows="10"></textarea><br />
      <button id="fs">发送</button>      
       
</body>
<script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>
<script type="text/javascript">
//点击发送按钮触发事件
fs.onclick=function(){
    //获取输入框的内容
    var val=fsk.value;
    //创建li标签
    var li=document.createElement("li");
    //将输入框内容给li
    li.innerHTML=val;
    //li添加到ul中
    lt.appendChild(li);
    // 清空输入框内容
    fsk.value="";
    //创建一个删除按钮
    var del=document.createElement("button");
    del.innerText="删除";
    // 删除按钮添加到ul中
    lt.appendChild(del)
    // 点击删除按钮触发事件
    del.onclick=function(){
        // ul移除li
      lt.removeChild(li);
      // ul移除删除按钮
      lt.removeChild(del);
    }
    // 事件委托，给父级li添加点击事件
   li.onclick=function(e){
    // 处理兼容问题
     var e=e||event;
     var target=e.target||e.srcElement;
     //创建一个a并用提示框prompt自己输入内容
      var a=prompt("请输入修改内容");
      //target为li里的每一个元素，这里代表里边的文本内容，先清空文本内容，在给他新的文本内容
      target.innerHTML="";
      target.innerHTML=a;
   } 
}
</script>