監聽清單事件的控制

這是一個使用清單來改變頁面行為用來可以通過監聽清單事件來執行相應的處理，它是一個監聽用的軟體編寫的文本檔案，是一個開發運用“監聽清單的控制”；大部分清單應用都是通過在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>

 以下圖示代碼設計出的架構圖：

 本文轉自huangyouliang10 51CTO部落格，原文連結:http://blog.51cto.com/1572091hyl10/346039