题目：
题目来源：链接
思路：
- 用时间委托机制优化DOM绑定事件，不用为每个新增的li绑定事件。
- 注意DOM上删除节点后，也要在数据中同步删除。
- 模糊匹配用正则对象和字符串的match方法。
- onkeyup 属性在用户（在键盘上）释放按键时触发，相对于 onkeyup 事件的事件次序： onkeydown onkeypress onkeyup ， onkey是键盘接受字符后的事件，这点和onkeypress不同。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>头条前端最后一道题</title>
<style>
.main-header {
text-align: center;
}
h1 {
font-size: 100px;
color: rgba(175, 47, 47, 0.4);
font-weight: 100;
margin: 20px;
}
.real-app {
width:600px;
margin: 0 auto;
box-shadow: 0 0 5px #666;
}
.add-input {
position: relative;
margin: 0;
width: 100%;
font-size: 24px;
font-family: inherit;
font-weight: inherit;
line-height: 1.4em;
border: 0;
outline: none;
color: inherit;
padding: 6px;
border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
box-sizing: border-box;
font-smoothing: antialiased;
padding: 16px 16px 16px 60px;
border: none;
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}
li {
margin: 4px 0;
color: rgba(175, 47, 47, 0.8);
list-style: none;
padding-left: 18px;
}
.close{
width: 20px;
height: 20px;
float:right;
background: rgba(0,0,0,0.2);
text-align: center;
line-height: 20px;
position: relative;
bottom: 3px;
right:4px;
}
</style>
</head>
<body>
<div class="main-header">
<h1>todos</h1>
</div>
<div class="real-app">
<input type="text" class="add-input" placeholder="请在这里输入">
<ul id="parent">
</ul>
</div>
</body>
<script>
var arr = [];
var button = "<div class='close'>X</div>";
// var button = " X";
var input = document.getElementsByClassName("add-input")[0];
var left = input.offsetLeft;
document.getElementById("parent").addEventListener("click",function(e) {
// e.target是被点击的元素!,this是在父元素捕获的ul
// 如果被点击的是li元素
// console.log("success");
if(e.target && e.target.nodeName == "DIV") {
// console.log(this);
// console.log(e.target);
// console.log(e.target.parentNode)
var str = e.target.parentNode.innerHTML.toString();
var k = str.indexOf("<");
str = str.substr(0,k);
// console.log(str);
e.target.parentNode.parentNode.removeChild(e.target.parentNode);
arr.pop(str);
// arr.pop(e.target.parentNode.text)
}
});
//onkeyup 属性在用户（在键盘上）释放按键时触发。
/* 提示：相对于 onkeyup 事件的事件次序：
onkeydown onkeypress onkeyup
onkey是键盘接受字符后的事件，这点和onkeypress不同
*/
input.onkeyup = function(e) {
var value = this.value;
console.log(value);
var ul = document.getElementsByTagName('ul')[0];
ul.style.left = left + "px";
ul.style.border = "none";
ul.innerHTML = "";
if(value) {
var reg = new RegExp(value);
for(var i = 0; i <arr.length; i++ ) {
//string类型的match方法
if(arr[i].match(reg)) {
var li = document.createElement('li');
li.innerHTML = arr[i] + button;
ul.style.border = "1px solid black";
ul.appendChild(li);
}
}
e = e || window.event;
if(e.keyCode == 13) {
var newLi = document.createElement('li');
var newValue = value;
newLi.innerHTML = newValue + button;
ul.appendChild(newLi);
arr.push(newValue);
input.value = "";
}
}
// 按照这个方法给每个li添加事件太浪费了，每次新增加回车就要操作一遍，可以利用时间委托机制，即上面的
// var close = document.getElementsByClassName("close");
// for(var i = 0; i < close.length; i++) {
// (function(i){
// close[i].onlick = function(){
// this.parentNode.parentNode.removeChild(this.parentNode);
// }
// })(i);
// }
}
</script>
</html>