????：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<h3>請留言</h3>
<input type="text">
<ul></ul>
</body>
</html>
<script>
var comment = document.querySelector('input'); //獲取input的結點
var ul = document.getElementsByTagName('ul')[0]; //獲取ul的結點
comment.focus();
comment.onkeydown = function (event) {
if (event.keyCode === 13) {
var li = document.createElement('li'); //生成新的li結點
li.innerHTML = comment.value + "<a href='javascript:;' onclick='del(this)'>刪除</a>";
//執(zhí)行一段空白的javascript語句，返回空或者false值，從而防止鏈接跳轉。跟當前a標簽無關，這段代碼始終都會執(zhí)行。
//如果按的是回車
//Event 對象代表事件的狀態(tài)，比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)、鼠標的位置、鼠標按鈕的狀態(tài)。
if (ul.childElementCount === 0) {
ul.appendChild(li);
} else {
var first = ul.firstElementChild; //ul下第一個子元素的結點
ul.insertBefore(li, first);
}
comment.value = "";
commemt.focus(); // comment.value = "";//清空input中的值
}
}
function del(eve) {
if (confirm('是否刪除？')) {
// 獲取要刪除的元素
var li = eve.parentNode; //獲取父結點
//一定要在被刪除元素的父結點上調用
li.parentNode.removeChild(li);
}
return false;
}
</script>
?? ???：天蓬老師?? ??：2019-05-27 13:13:06
???? ??：異步執(zhí)行, 可以從根本 上防止頁面阻塞行為的發(fā)生, 是一個巨大的進步, 也是單線程編程語言抗衡多線程的唯一利器