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>
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>
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>
原文：http://www.cnblogs.com/xy404/p/3634860.html