制作留言版之前需要了解的一些东西,比如事件的属性
事件的属性包括:事件捕获、时间冒泡阶段
举例一个事件点击效果:
实例
<button id="btn" class="red" onclick="alert(this.nodeName)">点击我试试看</button>
运行实例 »
点击 "运行实例" 按钮查看在线实例
留言板
实例
<!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"> </ul> <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.innerText = comment.value; if (list.childElementCount === 0) { list.appendChild(item); } else { list.insertBefore(item, list.firstElementChild); } comment.value = null; } } </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实