17、任务十六——事件委托机制、简单表单验证
生活随笔
收集整理的這篇文章主要介紹了
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）
?
轉載于:https://www.cnblogs.com/cjlalala/p/5815951.html
總結
以上是生活随笔為你收集整理的17、任务十六——事件委托机制、简单表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 洛谷 1373 小a和uim之大逃离
- 下一篇： 其实吧，微信就是已经用电脑上线，第二天消