根据上面HTML,用JS实现点击 li 输入当前 li 节点在 ul 列表中的索引
<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li>55555</li>
<ul>
1.获取所有的li元素,然后进行循环给每个li绑定事件
在这个方法中,有一些小问题
(1)document.getElementsByTagName(‘li’)的返回值是一个nodeList,是一个类数组,像函数的arguments也是伪数组,而不是一个真正意义上的数组,所以直接调用数组的一些方法会出错,所以要注意先把他转换为数组,关于类数组转数组的方法在后面文章有所涉及,我在这里简单的使用了Array.from方法。
(2)在使用this.index给每一个元素绑定事件时不能使用箭头函数,因为箭头函数没有this,所以会取不到index的值。关于this也是需要深入了解和学习的。
var lis = document.getElementsByTagName('li')
liList = Array.from(lis)
liList.forEach((value,index)=>{
console.log(value)
value.index = index
value.onclick = function(){
console.log(this.index)
}
})
或者
var lis = document.getElementsByTagName('li')
liList = Array.from(lis)
liList.forEach((value,index)=>{
console.log(value)
value.index = index
value.onclick = (e)=>{
console.log(e.target.index)
}
})
2.利用事件委托机制,事件代理(Event Delegation),又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义,“事件代理”即是把原本需要绑定在子元素的响应事件(click、keydown…)委托给父元素,让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。
(1)ul绑定的事件target在点击过程中实际上触发的还是子元素,只不过是由父组件执行监听的任务,所以点击 11111 的时候,返回的target是<li>11111</li>,
第二步再去li的list中查找所在的位置就好了
(2)addEventListener的第三个参数说明 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行,false- false- 默认。事件句柄在冒泡阶段执行
(3)优势 可以大量节省内存占用,减少事件注册,比如在ul上代理所有li的click事件就非常棒,可以实现当新增子对象时无需再次对其绑定(动态绑定事件)
var lis = document.getElementsByTagName('li')
liList = Array.from(lis)
Ul = document.getElementsByTagName('ul')[0]
Ul.addEventListener("click",function(event){
var event = event || window.event;
target = event.target || event.srcElement;
console.log(liList.indexOf(target))
},false);