下面的代码有点问题， 用的是事件委托， JS 方法 如果获取 当前LI 的索引值 ？ index不起用 。 为何 ？ 请指教
<!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js" type="text/javascript"></script> <style> div { width:60px; height:60px; margin:5px; float:left; } </style> <title>事件委托</title> </head> <body> <h2>事件绑定的2种方式</h2> <ul id="resources"> <li>rerewr</li> <li>54555</li>、
<li>2242</li> </ul> <script type="text/javascript"> (function(){ var oaa=document.querySelectorAll("#resources")[0]; oaa.addEventListener("click",handler,false); function handler(e){ // var x= e.target; var e = e || window.event; var target = e.target || e.srcElement; if(target.nodeName.toLowerCase()==="li"){ //alert("事件委托020"+x); target.style.background = "red"; console.log(target.index) e.preventDefault(); } } })() </script> </body> </html>
用JQ 方法 ，
ps: 我感觉 这个方法，事件委托，
但为什么 说明是
用 on 方法给 body 上绑定一个 click 事件，冒泡到 p 元素的时候才出发回调函数，
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js" type="text/javascript"></script> <title>模拟jQuery</title> </head> <body> <ul> <li>225252</li> <li>aa</li> <li>nnnnnnnnnn</li> <li>rrrrrrrrrrr</li> </ul> <script type="text/javascript"> var body = $('body') body.on('click','li',function(){ console.log($(this).index()) }) </script> </body> </html>