17、任务十六——事件委托机制、简单表单验证

0、题目

用户输入城市名称和空气质量指数后，点击“确认添加”按钮后，就会将用户的输入在进行验证后，添加到下面的表格中，新增一行进行显示
用户输入的城市名必须为中英文字符，空气质量指数必须为整数
用户输入的城市名字和空气质量指数需要进行前后去空格及空字符处理（trim）
用户输入不合规格时，需要给出提示（允许用alert，也可以自行定义提示方式）
用户可以点击表格列中的“删除”按钮，删掉那一行的数据

　　首先用户输入的数据需要进行去空格及空字符处理（即trim（）函数），之后进行合规性验证，符合标准才可以添加至表格中，每一行的表格都有“删除”按钮，点击即可删除这一行的数据，如果给每一个按钮绑定事件的话，会对页面性能产生很大影响，而采用事件委托即可避免这个问题。

1、代码

task16.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>IFE JavaScript Task 16</title>
 6   </head>
 7 <body>
 8 <div>
 9     <label>城市名称：<input id="aqi-city-input" type="text"></label><br>
10     <label>空气质量指数：<input id="aqi-value-input" type="text"></label><br>
11     <button id="add-btn">确认添加</button>
12   </div>
13   <table id="aqi-table">
14   <!-- 
15     <tr>
16       <td>城市</td><td>空气质量</td><td>操作</td>
17     </tr>
18     <tr>
19       <td>北京</td><td>90</td><td><button>删除</button></td>
20     </tr>
21     <tr>
22       <td>北京</td><td>90</td><td><button>删除</button></td>
23     </tr>
24    -->
25   </table>
26 <script src="task16.js"></script>
27 </body>
28 </html>

task16.js

 1 /**
 2  * aqiData，存储用户输入的空气指数数据
 3  * 示例格式：
 4  * aqiData = {
 5  *    "北京": 90,
 6  *    "上海": 40
 7  * };
 8  */
 9 var aqiData = {};
10  /* 从用户输入中获取数据，向aqiData中增加一条数据
11  * 然后渲染aqi-list列表，增加新增的数据
12  */
13 function addAqiData() {
14 　　var city=document.getElementById("aqi-city-input").value.trim();     //去掉空格的城市名
15 　　var number=document.getElementById("aqi-value-input").value.trim();  //去掉空格的空气质量指数
16     　　if(!(/^[u4e00-u9fa5_a-zA-Z]+$/.test(city))){     //验证城市名是否合规
17          　alert("城市名必须是中文或英文！");
18        　　return;
19     　　}
20     　　if(!(/^-?[1-9]d*$/.test(number))){               //验证空气质量指数是否合规
21           　alert("空气质量指数必须为整数！");
22        　　 return;
23    　　 }
24     　　else{
25       　　  aqiData[city]=number;
26    　　 }
27 }
28 /**
29  * 渲染aqi-table表格
30  */
31 function renderAqiList() {
32 　　var content="<tr><td>城市</td><td>空气质量</td><td>操作</td></tr>";
33 　　for( var city in aqiData){
34         content+="<tr><td>"+city+"</td><td>"+aqiData[city]+"</td><td><button>删除</button></td></tr>";
35     }
36     document.getElementById("aqi-table").innerHTML=city ? content:" ";  //如果删除所有数据（即city不存在），那么content为“ ”，表头也会被删除掉
37 }
38 /**
39  * 点击add-btn时的处理逻辑
40  * 获取用户输入，更新数据，并进行页面呈现的更新
41  */
42 function addBtnHandle() {
43   addAqiData();
44   renderAqiList();
45 }
46 /**
47  * 点击各个删除按钮的时候的处理逻辑
48  * 获取哪个城市数据被删，删除数据，更新表格显示
49  */
50 function delBtnHandle(t) {
51   var city=t.target.parentNode.parentNode.firstChild.innerHTML;
52   delete aqiData[city];
53   renderAqiList();
54 }
55 function init() {
56   // 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数
57       document.getElementById("add-btn").addEventListener("click",addBtnHandle);  
58   // 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数
59       document.getElementById("aqi-table").addEventListener("click",delBtnHandle);
60 }
61 init();

2、遇到的问题及解答

（1）报错：Cannot call method ' addEventListener ' of null

　　开始一直报错，后来发现是由于之前一直把js文件在<head>标签中引用，导致getElementById的时候Dom对象还未出现。（待补！浏览器渲染和DOM模型）

（2）delete 注意：

　　可以删除对象属性；

　　删除数组元素时，原来数组长度/索引不变，删除的元素变为undefined；

　　不可以删除变量和函数；

　　但Eval代码块中的变量和函数可以被删除（Firebug console中执行的代码会被当成是 Eval code来进行解析）。

详见：深入理解Delete（JavaScript）