最开始实现某一项功能的时候，结构、样式和行为是混在一起的。
本来写代码就是为了让自己和别人看明白，这样做的缺点很明显，不方便查看和修改。
1、结构、样式、行为不分离
所有的浏览器都支持这样的写法。例如下面的网页，表格内的奇数行和偶数行有不同的样式，类似斑马线，同时鼠标在不同的行上移入和移出对应的行有不同的样式表现，点击删除按钮有删除表格行的功能。
JavaScript->JavaScript事件代理学生成绩表 学号 姓名 语文 数学 平均分 操作 101 小明 81.5 87 84.25 删除 102 小黄 61 47.5 54.25 删除 103 小丽 89 83 86 删除 104 小宋 56 97 76.5 删除 105 小王 82 73 77.5 删除 106 小李 31 63 47 删除 107 小华 49 83 66 删除
结果图：
2、使用JavaScript完成样式和行为
将样式从网页结构中剥离出来，使用JavaScript代码来完成，这样稍微改进了一下网页结构和样式的组织方式。
JavaScript->JavaScript事件代理学生成绩表 学号 姓名 语文 数学 平均分 操作 101 小明 81.5 87 84.25 删除 102 小黄 61 47.5 54.25 删除 103 小丽 89 83 86 删除 104 小宋 56 97 76.5 删除 105 小王 82 73 77.5 删除 106 小李 31 63 47 删除 107 小华 49 83 66 删除
上面也可以完成同样的功能，但仍然不方便查看。
3、结构、样式、行为分离
将结构、样式、行为剥离出来，各自放入一个文件，方便查看和修改。
①网页文件：（JavaScript事件代理3.html）
JavaScript事件代理学生成绩表 学号 姓名 语文 数学 平均分 操作
②、样式文件（JavaScript事件代理.css）
.table {
cellpadding:2;
cellspacing:2;
}
.table tr{
line-height:200%;
}
.table td{
width: 100px;
}
.rowTitleColorSet{background-color: #818080;color: rgb(232, 232, 232);text-align: center;}
.evenRowColorSet{background-color: #efefef;color: rgb(8, 8, 8);text-align: center}
.oddRowColorSet{background-color: #f8f8f8;color: rgb(128, 128, 128);text-align: center}
.focusRowColorSet{background-color: #999;color:#d70008;text-align: center}
③、脚本文件：（JavaScript事件代理.js）
function init(){
//创建studentList对象
var studentList=[
{Id:101,Name:'小明',ChineseScore:81.5,MathScore:87},
{Id:102,Name:'小黄',ChineseScore:61,MathScore:47.5},
{Id:103,Name:'小丽',ChineseScore:89.5,MathScore:83},
{Id:104,Name:'小宋',ChineseScore:56,MathScore:97},
{Id:105,Name:'小王',ChineseScore:82,MathScore:73},
{Id:106,Name:'小李',ChineseScore:31,MathScore:63},
{Id:107,Name:'小华',ChineseScore:49,MathScore:83},
]
//生成表格
for(item in studentList){
//第一步：创建td
//创建学号td并加入到表格行
var tdId=document.createElement("td");
tdId.style="width: 100px;";
tdId.appendChild(document.createTextNode(studentList[item].Id));
//创建姓名td
var tdName=document.createElement("td");
tdName.style="width: 100px;";
tdName.appendChild(document.createTextNode(studentList[item].Name));
//创建语文td
var tdChineseScore=document.createElement("td");
tdChineseScore.style="width: 100px;";
tdChineseScore.appendChild(document.createTextNode(studentList[item].ChineseScore));
//创建数学td
var tdMathScore=document.createElement("td");
tdMathScore.style="width: 100px;";
tdMathScore.appendChild(document.createTextNode(studentList[item].MathScore));
//创建平均分td
var tdAverageScore=document.createElement("td");
tdAverageScore.style="width: 100px;";
AverageScore=(studentList[item].MathScore+studentList[item].MathScore)/2;
tdAverageScore.appendChild(document.createTextNode( AverageScore ));
//创建按钮
var tdbtn=document.createElement("td");
tdbtn.style="width: 100px;";
var btn=document.createElement('input');
btn.type="button";
btn.id=item;
btn.value="删除";
btn.onclick=function(){ del(this); };
tdbtn.appendChild( btn );
//第二步：生成tr
var tr=document.createElement("tr");
//设置行样式
if(parseInt(item)%2==0){
tr.className="evenRowColorSet"
}else{
tr.className="oddRowColorSet"
}
tr.appendChild(tdId);
tr.appendChild(tdName);
tr.appendChild(tdChineseScore);
tr.appendChild(tdMathScore);
tr.appendChild(tdAverageScore);
tr.appendChild(tdbtn);
//给行添加事件响应
tr.onmouseenter=funcMouseenter;//鼠标移入事件
tr.onmouseout=funcMouseout;//鼠标移出事件
//第三步：生成表格
//var table=document.getElementsByTagName("table")[0];//也可以但不建议使用
var table=document.getElementById("studentTable");
table.appendChild(tr);
}
}
function funcMouseenter(event){
this.className='focusRowColorSet'
}
function funcMouseout(event){
var studentID=this.cells[0].innerHTML;
if(parseInt(studentID)%2==0){
this.className="evenRowColorSet"
}else{
this.className="oddRowColorSet"
}
}
function del(obj){
var tr = obj.parentNode.parentNode;
console.log(tr);
var studentID=tr.cells[0].innerHTML;
var flag = confirm("确认删除学号为" + studentID + "记录吗?");
if(flag) {//确认删除
//从数据库中删除学号为studentID
//delFromDB
tr.parentNode.removeChild(tr);//删除tr
}
//return false
}
4、改进事件的挂载方式
上面的事件挂载属于赋值的方式，因为事件也是值，后面的挂载事件必然会改写前面的挂载事件，这对代码的组织不友好。
使用下面的方式进行：
domObj.addEventListener(eventType,func,eventModule) eventType:事件类型，不要加on。 func:事件发生后的回调函数。 eventModule：boolean值，代表事件模型，false代表冒泡模型，true代码捕获模型,默认是false。
这样的方式属于面向对象的方式挂载事件，后面的挂载不会影响到前面的挂载。
为按钮挂载事件：btn.addEventListener('click',function(){ del(this); })
function del(obj){
var tr = obj.parentNode.parentNode;
console.log(tr);
var studentID=tr.cells[0].innerHTML;
var flag = confirm("确认删除学号为" + studentID + "记录吗?");
if(flag) {//确认删除
//从数据库中删除学号为studentID
//delFromDB
tr.parentNode.removeChild(tr);//删除tr
}
//return false
}
为表格行挂载事件：
tr.addEventListener('mouseenter',function(){ funcMouseenter(this); }) tr.addEventListener('mouseout',function(){ funcMouseout(this); })
function funcMouseenter(obj){
obj.className='focusRowColorSet'
}
function funcMouseout(obj){
var studentID=obj.cells[0].innerHTML;
if(parseInt(studentID)%2==0){
obj.className="evenRowColorSet"
}else{
obj.className="oddRowColorSet"
}
}
学习和掌握这些基本操作对学习JQuery、Vue.js、BootStrap等前端架构很有帮助，因为这些WebAPI都是它们所依赖的，只是它们进行了封装。
