您的位置：首页 > 其它

用事件委托获取每一个LI的索引值有问题

2015-08-25 18:17 477 查看

下面的代码有点问题，用的是事件委托， 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

用事件委托获取每一个LI的索引值 有问题

用事件委托获取每一个LI的索引值有问题