事件委托和事件源入门

 1 /*
 2 *html
 3 */
 4 
 5 
 6 <body>
 7 
 8 <ul>
 9     <li>11111111</li>
10     <li>22222222</li>
11     <li>33333333</li>
12     <li>44444444</li>
13     <li>55555555</li>
14 </ul>
15 
16 </body>

一个简单的ul、li布局


 1 /*
 2 *JavaScript
 3 */
 4 <script type="text/javascript">
 5 
 6 window.onload = function (){
 7     var oUl = document.getElementsByTagName("ul")[0];
 8     var aLi = oUl.getElementsByTagName("li");
 9     
10     for(var i = 0; i<aLi.length;i++){
11         aLi[i].xy = i;
12         aLi[i].onclick = function (){
13 　　　　　　　//当前父元素的标签名　　+　　当前点击元素的innerHTML　　+　　当前元素的下标
14             alert(this.parentNode.nodeName.toLowerCase() + " , html:" + this.innerHTML + " ,i:" + (this.xy+1));
15         }
16     }    
17 }
18 
19 </script>

parentNode　　//获取当前元素的父节点
childNodes　　//获取当前元素的子节点（会有兼容问题，在火狐下面浏览器会把空节点也当成节点来算）
nodeName　　//获取获取的名字
toLowerCase()　　//把文本转成小写
toUpperCase()　　//把文本转成大写

 1 /*
 2 *JavaScript
 3 */
 4 <script type="text/javascript">
 5 
 6 window.onload = function (){
 7     var oUl = document.getElementsByTagName("ul")[0];
 8     var aLi = oUl.getElementsByTagName("li");
 9     
10     for(var i=0;i<aLi.length;i++){
11         aLi[i].onmouseover = function (){
12             this.style.background = "red";
13         }    
14         aLi[i].onmouseout = function (){
15             this.style.background = "";
16         }
17     }
18 }
19 
20 </script>

惯性的操作方法

 1 /*
 2 *JavaScript
 3 */
 4 <script type="text/javascript">
 5 
 6 window.onload = function (){
 7     var oUl = document.getElementsByTagName("ul")[0];
 8     
 9     oUl.onmouseover = function (ev){
10         var oEvent = ev || event;                            //获取事件对象
11         var target = oEvent.srcElement || oEvent.target;    //获取事件源：获取当前操作的是那个元素或是在那个元素上面进行操作.    IE || FF
12         if(target.nodeName.toLowerCase() == "li"){            //指定元素发生事件
13             target.style.background = "green";
14         }                
15     }
16     oUl.onmouseout = function (ev){
17         var oEvent = ev || event;                            //获取事件对象
18         var target = oEvent.srcElement || oEvent.target;    //获取事件源：获取当前操作的是那个元素或是在那个元素上面进行操作.
19         if(target.nodeName.toLowerCase() == "li"){            //
20             target.style.background = "";
21         }
22     }    
23 }
24 
25 </script>

通过事件源来操作（提高性能）

用惯性的操作的方法在页面没有刷新的情况下不能影响新添加的元素
- 　　如：结合DOM操作在最后一个li元素后面动态添加一个新的li元素，这个时候用惯性操作的方法对新添加的元素无效。
使用事件源的方法不会有上面的情况（对新添加的元素也会有效果）