纯页面标签添加程序

做了一个个小小的demo，能够比较温和地处理页面的一些事件，继续学习。 js部分：

function listenerCatch(eventObj,event,eventHandler){ if (eventObj.addEventListener){ eventObj.addEventListener(event,eventHandler,false) } else if (eventObj.attachEvent) { event="on" +event; eventObj.attachEvent(event, eventHandler); } } listenerCatch(window,"load",getForm); function getForm(eve){ listenerCatch(document.getElementById("subdelect"),"click",delectOp); listenerCatch(document.getElementById("newop"),"focus",cancelAll); listenerCatch(document.getElementById("newop"),"blur",tellYou); listenerCatch(document.getElementById("subok"),"click",addOpn); listenerCatch(document.getElementById("substore"),"click",storeOpn); } function cancelEvent(event){ if (event.preventDefault){ //谷歌等高端浏览器调用方式 event.preventDefault(); event.stopPropagation(); }else { //IE调用方式 event.returnValue=false; event.cancelBubble=true; } } //设置全局变量 var aopn=document.getElementById("newop"); //监听输入框为默认值后删除输入框内已有的 function cancelAll(eve){ var theEvent=eve?eve:window.event; var aopn=document.getElementById("newop"); if(aopn.value=="请输入..."){ aopn.value=""; } cancelEvent(theEvent); } //提示恢复 function tellYou(eve){ var theEvent=eve?eve:window.event; var aopn=document.getElementById("newop"); if(aopn.value==""){ aopn.value="请输入..."; } cancelEvent(theEvent); } //添加标签 function addOpn(eve){ var aopn=document.getElementById("newop"); var ops=document.getElementById("form").selection.options; var theEvent=eve?eve:window.event; if(aopn.value!=""&&aopn.value!="请输入..."){ alert("您已添加标签"+"“"+aopn.value+"”"); ops[ops.length]=new Option(aopn.value,aopn.value); }else{ alert("请输入标签"); } aopn.value="请输入..."; cancelEvent(theEvent); } //标签删除 function delectOp(eve){ var theEvent=eve?eve:window.event; var aopn=document.getElementById("newop"); var ops=document.getElementById("form").selection.options; var st=""; for(var i=0,j=0;i<ops.length;i++) { if(ops[i].selected){ if(j==0){ st+=ops[i].text; }else{ st=st+"，"+ops[i].text; } ops[i]=null; i--,j++; } } if(st!=""){alert(st+"标签已删除");} else{alert("请先选择您需要删除的标签");} cancelEvent(theEvent); } //收藏标签 function storeOpn(eve){ var theEvent=eve?eve:window.event; var aopn=document.getElementById("newop"); var ops=document.getElementById("form").selection.options; var Txt=""; var strTxt=document.getElementById("txt").value; for(var i=0;i<ops.length;i++) { if(ops[i].selected){ if(Txt==""){ //判断语句一定要用==！！！ Txt+=ops[i].value; } else{ Txt+="，"+ops[i].value; } //ops[i].selected=false; ops[i]=null; i--; } } if(strTxt!=""){ document.getElementById("txt").value+="，"+Txt;} else{ document.getElementById("txt").value+=Txt; } if(Txt!=""){alert(Txt+"标签收藏成功");} else{alert("请先选择您需要收藏的标签");} cancelEvent(theEvent); }

html部分（在body里面加入即可）：

<div> <form id="form" action=""> <p> <input type="text" id="newop" value="请输入..." style="float:left"/> <input type="submit" id="subok" value="添加标签"/> <div> <select name="selection" multiple="multiple" style="width:173px;float:left;position:absolute;left:8px;top:36px"> <option value="学校">学校</option> <option value="医疗">医疗</option> <option value="电子地图">电子地图</option> </select> </div> </p> </form> </div> <div style="position:absolute;top:115px;left:8px"> <input type="submit" id="subdelect" value="删除标签"/> <input type="submit" id="substore" value="收藏标签"/> <p style="margin:4px 0 0 0"> <textarea cols="50" rows="10" id="txt"></textarea> </p> </div>

实现截图：