欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

使用JavaScript事件委托找到DOM元素的位置

最编程 2024-08-07 14:16:18
...

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

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
</ul>

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

上一篇： 用JavaScript原生方法实现事件代理

下一篇： 理解事件冒泡、事件捕获与事件委托的机制

推荐阅读