怎么确定触发事件的是第几个元素
<li class="t"></li>
<li class="t"></li>
<li class="t"></li>
<li class="t"></li>
<li class="t"></li>
<li class="t"></li>
比如当我触发第四个li的时候 怎么判断是第四个.t class元素
事件代理,伪数组调用indexOf方法就行了
看这里
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ol>
<li class="t">1</li>
<li class="t">2</li>
<li class="t">3</li>
<li class="t">4</li>
<li class="t">5</li>
<li class="t">6</li>
</ol>
</body>
<script type='text/script'>
var ol=document.getElementsByTagName('ol')[0];
var listItems=ol.getElementsByTagName('li');
ol.addEventListener('click',function(e){
if(e.target.tagName.toLowerCase()==='li'){
var aindex=[].indexOf.call(listItems,e.target);
}
console.log(aindex);
},false);
</script>
</html>
e是绑定事件回调函数的参数,比如:
$(任意dom).on('click',function(e){
$(e.target)
})
$(e.target)就是本次事件产生的对象。
1,通过事件代理的方式,前提是li
外面有一个外层容器,比如说ul
var container = document.getElementsByTagName('ul')[0];
var lists = container.getElementsByTagName('li');
var len = lists.length;
container.onclick = function(eve){
var e = eve || window.event;
var target = e.srcElement || e.target;
for(var i = 0; i < len; i++){
if(target === lists[i]){
console.log('The index of li is ' + (i+1));
return true;
}
}
}
2,元素各自绑定自己的事件
var lists = document.getElementsByTagName('li');
var len = lists.length;
for(var i = 0; i < len; i++){
(function(i){
lists[i].onclick = function(){
console.log('The index of li is ' + (i+1));
}
})(i);
}
e.target
this or event.currentTarget
event.target
$(this).index();