7月11日作业
1. 实例演示你对事件代理机制的理解?提示, 从事件冒泡与DOM结构二方面进行分析
事件代理又叫事件委托,就是父对象代理子对象处理某个事件, 或者是子对象委托父对象处理某个事件. 一般捕获阶段是自上往下捕获, 而冒泡阶段为自下向上冒泡.
实例
<!DOCTYPE html> <html lang="en" onclick="alert(this.nodeName)"> <head onclick="alert(this.nodeName)"> <meta charset="UTF-8"> <title>鼠标点击事件</title> </head> <body onclick="alert(this.nodeName)"> <!--nodeName 节点的名称,鼠标点击时弹出节点的名称--> <button onclick="alert(this.nodeName)">点击试试</button> <!--从层层点击后出现的情况,来***事件的三个阶段,点击之后从--> <!--button-body -head-html-docment--体现了事件的冒泡阶段--> <!--是从下到上,或者说从内到外--> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2. 模仿留言板案例, 利用学过的CSS知识, 写一个美观的留言板页面, 并使用JavaScript完成基本的留言添加与删除功能...
发挥你的想象力, 做一个看上去较为专业的界面:
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作: 删除留言</title>
<style>
.main{
width: 1100px;
height: 700px;
background-color: #5ae2ff;
margin: 30px auto;
padding: 20px;
}
.left{
width: 400px;
height: 700px;
float: left;
}
.left img{
width: 400px;
height: 700px;
}
.right{
width: 620px;
height: 680px;
float: right;
background-color: #fff;
padding: 10px 30px;
}
</style>
</head>
<body>
<div class="main">
<div class="left"><img src="https://img.php.cn/upload/jscode/000/000/001/5c64d530ad395428.jpg" /> </div>
<div class="right">
<h1>php中文网问答社区</h1>
<label for="comment">请留言:</label>
<input type="text" id="comment" autofocus>
<ul id="list"></ul>
</div></div>
<script>
var comment = document.getElementById('comment');
var list = document.getElementById('list');
comment.addEventListener('keypress', addComment1, false);
function addComment1(event) {
if (event.key === 'Enter') {
var item = document.createElement('li');
item.innerHTML = comment.value + ' <button>删除</button>';
if (list.childElementCount === 0) {
list.appendChild(item);
} else {
list.insertBefore(item, list.firstElementChild);
}
comment.value = null;
}
}
list.addEventListener('click', del, false);
function del(event) {
console.log(event.currentTarget);
console.log(event.target);
if (confirm('是否删除?')) {
var ul = event.currentTarget;
var btn = event.target;
var li = btn.parentElement;
ul.removeChild(li);
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例