监听列表事件的控制

这是一个使用列表来改变页面行为用来可以通过监听列表事件来执行相应的处理，它是一个监听用的软件编写的文本文件，是一个开发运用“监听列表的控制”；大部分列表应用都是通过在onchange事件中遍历所有列表项，来查看哪些项被选中之后做出不同的处理。                                                                                                                            

<style>
     body {
        border:none;
        overflow:hidden;
     }
     select {
        width:150px;
        float:left;
     #block {
        width:100px;
        height:100px;
        border:1px solid #000;
        float:right;
     }
  </style>
  <select id="selector" multiple size=6>
  <option style="background:#000" value="0x000"></option>
      <option style="background:#fff" value="0xfff"></option>
      <option style="background:#f00" value="0xf00"></option>
      <option style="background:#0f0" value="0x0f0"></option>
      <option style="background:#00f" value="0x00f"></option>
      <option style="background:#ff0" value="0xff0"></option>
      <option style="background:#0ff" value="0x0ff"></option>
      <option style="background:#f0f" value="0xf0f"></option>
   </select>
   <div id=block">
   </div>
   <script>
       var baseColor = 0x000;
       var clorSelector = document.getElementById("selector");
       colorSelector.onchang = function() {
           for(var i=0; i<this.options.lengh; i++) {
               if(this.options[i].selected)
                   basecoler^=parseInt(this.option s[i].value);
           }
           baseColor = baseColor.toString(16);
           if(basecolor.length ==1) basecolor = "00"+basecolor;
           if(basecolor.length ==2) basecolor = "0"+basecolor;
           document.getElementById('block').style.background="#"+basecolor;
       }
    </script>

 

 以下图示代码设计出的框架图：