事件委托修改留言板
<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>
150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
