您的位置：首页 > 其它

事件委托修改留言板

2019-04-29 20:14 218 查看

事件委托修改留言板

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航