1. 实例演示你对事件代理机制的理解?
事件代理又叫事件委托,当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。 一般捕获阶段是自上往下捕获, 而冒泡阶段为自下向上冒泡，而事件代理是基于浏览器的事件冒泡机制。
<!DOCTYPE html> <html lang="en" onclick="alert(this.nodeName)" > <head> <meta charset="UTF-8"> <title>点击事件</title> </head> <body> <div onclick="alert(this.nodeName)"> <button onclick="alert(this.nodeName)">点击试试</button> </div> <!--多次点击之后，依次出现button，div，html，这体现了事件的冒泡阶段是由内到外的--> </body> </html>
2. 模仿留言板案例, 利用学过的CSS知识, 写一个美观的留言板页面, 并使用JavaScript完成基本的留言添加与删除功能...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<style>
.box1 {
margin: 0;
background-color: lightpink;
padding: 10px;
width: 400px;
height: 460px;
}
</style>
</head>
<body>
<div class="box1"><img src="" />
<div>
<h1 style="background-color: red">QQ空间留言板</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', addComment, false);
function addComment(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) {
if (event.target.nodeName === 'BUTTON') {
if (confirm('是否删除?')) {
event.currentTarget.removeChild(event.target.parentElement);
}
}
}
</script>
</body>
</html>