实例演示你对事件代理机制的理解?
提示, 从事件冒泡与DOM结构二方面进行分析
收藏
<!DOCTYPE html>
<html lang="cn_zh">
<head>
<meta charset="UTF-8">
<title>留言本</title>
</head>
<body>
<label for="comment">留言本</label>
<input type="text" name="comment" id="comment" autofocus>
<ul id="list"></ul>
<script>
var comment = document.getElementById('comment');
var ul = document.getElementById('list');
comment.addEventListener('keypress',getvalue,false);
function getvalue(event) {
if (event.key==='Enter') {
var li = document.createElement('li');
li.innerHTML = comment.value + ' <button>删去</button>';
if (ul.childElementCount === 0) {ul.appendChild(li);
comment.value = null;}else{
ul.insertBefore(li,ul.firstElementChild);
comment.value = null;
}
}
}
ul.addEventListener("click", del,false);
function del(event) {
if ( confirm("你确定删去？")) {
event.currentTarget.removeChild(event.target.parentElement);
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
模仿留言板案例, 利用学过的CSS知识, 写一个美观的留言板页面, 并使用JavaScript完成基本的留言添加与删除功能...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
</head>
<body>
<label for="comment">请留言：</label>
<input type="text" id="comment" autofocus>
<ul id="list">
<!--<li>123</li>-->
<!--<li>456</li>-->
</ul>
<script>
// 键盘事件：keydown/keyup/keypress
var comment = document.getElementById('comment');
// 留言框
var list = document.getElementById('list');
// 为留言框添加事件监听
comment.addEventListener('keypress',addComment1,false);
// function addComment(ev){
// // 事件方法中有一个默认的参数就是事件对象：ev,evt,event
// console.log(ev.key);
// if(event.key === 'Enter'){
// // 1.创建一个li元素
// var item = document .createElement('li');
// // 2.添加内容
// item.innerText = comment.value;
// // 3.将留言添加到页面中
// list.appendChild(item);
// // 4.清空留言板
// comment.value = null;
// }
// 改进事件方法
function addComment1(ev){
// 事件方法中有一个默认的参数就是事件对象：ev,evt,event
console.log(ev.key);
if(event.key === 'Enter'){
// 1.创建一个li元素
var item = document .createElement('li');
// 2.添加内容
item.innerHTML = comment.value + ' <button>删除</button>';
// item.innerHTML与item.innerText区别：
// 前者可以将html可以将一段含有html的文本解析为html元素，并添加到标签中，
// 3.将留言添加到页面中
if(list.childElementCount === 0){
list.appendChild(item);
// 当前没有留言时，直接添加
}else{
list.insertBefore(item,list.firstElementChild);
// 格式：parentNode.insertBefore(newNode,firstElementChild);
// 将新插入节点放在第一个子节点前，在父节点上调用的方法
}
// 4.清空留言板
comment.value = null;
}
}
// 事件代理，添加删除按钮的动作
list.addEventListener('click',del,false);
function del(event) {
if (confirm('是否删除？')){
// var ul = event.currentTarget;
// // 父节点
// var btn = event.target;
// // 当前正在触发事件的元素，正在被点击的；
// var li = btn.parentElement;
// ul.removeChild(li);
// }
event.currentTarget.removeChild(event.target.parentElement);
}
// return false;
// 默认false
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
