JS利用事件委托获取DOM元素的index

2024-07-12 00:07| 来源: 网络整理| 查看: 265

我们知道，在jQuery中，元素拥有index()方法，用来获取当前DOM元素的下标（index），比如在ul中的li，可以快速通过以下代码获取当前点击的li的下标： html：

1 2 3 4

jQuery：

$('ul').on('click', 'li', function () { console.log($(this).index()); });

这里是利用事件委托，为ul绑定点击事件，由于jQuery具有隐式迭代的特性（https://www.zhihu.com/question/20146027），利用on的事件委托，每个li即同样绑定了点击事件。这样点击ul中的li即可利用当前元素的index（）方法获取下标，这种方法在实际开发中经常使用。

在大多数写法中，我们常见的就是利用闭包或者ES6 let 关键字来获取下标，为每个li都绑定了点击事件，假如有一万个li，这种做法效率并不高：

// ES5闭包 const lis = document.querySelectorAll('ul li'); for (var i = 0; i < lis.length; i++) { (function (i) { lis[i].onclick = function () { console.log(i); } })(i) } // ES6 let const lis = document.querySelectorAll('ul li'); for (let i = 0; i < lis.length; i++) { lis[i].onclick = function () { console.log(i); } }

但是我们利用JavaScript事件委托，，借用数组的方法，效率更高效

document.querySelector('ul').addEventListener('click', function (e) { console.log([...document.querySelectorAll('ul li')].indexOf(e.target)); // 转换数组同样可以使用Array.from() });

其实核心思路和jQuery一样的，都是利用事件委托，为ul绑定点击事件后，利用H5选择器querySelectorAll将所有的li选择出来，注意，由于获取的结果是伪数组，我们可以利用ES6方法将其转换为数组，借用数组的indexOf（）方法，提供的参数为当前点击的目标元素，这样就可以获取当前点击li在数组中的下标了。

附ES5写法：

document.querySelector('ul').addEventListener('click', function (e) { console.log(Array.prototype.indexOf.call(document.querySelectorAll('ul li'),e.target)); });

来自：https://shixtao.cn/article/33

【本文地址】

公司简介

联系我们