通过事件委托方式实现一个小demo

最新推荐文章于 2024-07-24 16:53:23 发布

清梦-

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量187

点赞数

分类专栏：学习笔记文章标签： html javascript

本文链接：https://blog.csdn.net/lyh0902/article/details/123071655

版权

学习笔记专栏收录该内容

8 篇文章 1 订阅

订阅专栏

需求：当前有个 ul列表，当点击列表里面的每个 li元素时，我们需要弹出他的内容以及他的索引。

代码：

<body>
    <ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
<style>
    #ul {
        background-color: gray;
        width: 700px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    li {
        margin-bottom: 20px;
        width: 80%;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: lightgoldenrodyellow;
    }
</style>

效果图：

首先不使用事件委托的方式尝试一下怎么实现

const liList = document.getElementsByTagName('li');
for(let i = 0; i < liList.length; i++) {
    liList[i].addEventListener('click', function(e) {
        alert(`内容为${e.target.innerHTML}, 索引为${i}`);
    })
}

这样确实是实现了当前需求，但是大家应该都清楚它的危害以及弊端

弊端：去给每个li元素去添加 addEventListener，其实是对性能有所损耗的。而且我们现在是操作了每个元素，我们现代web开发的一个目的就是尽量少去操作原生 DOM元素。为什么现在jQuery不流行了，现代流行 Vue 以及 React，其实他们就是通过自己的一层虚拟 DOM去隔绝了咱们开发者直接操作 DOM的一个路径，从这一方面提升了一些性能。

通过事件委托方式去实现

    const ul = document.querySelector('ul');
    ul.addEventListener('click', function(e) {
        const target = e.target;
        /**
         * 判断 tagName为 li的时候去实现当前需求
         * 当我们去判断一些英文字符串的时候，严谨一点，我们先转换一些英文大小写
         * 因为有一些奇怪的浏览器，会给我们输出的是大写的 LI
         * 最好的情况就是转换成小写再去比较，这样是比较严谨的写法
         */
        if(target.tagName.toLowerCase() === 'li') {
            // 获取 liList目的 我们要获取当前子元素的索引
            const liList = this.querySelectorAll('li');
            /** 
             * 注意：liList其实是一个伪数组， 是一个 NodeList并不是一个纯正的数组，所以拿索引有两种方法。
             * 方法一：通过原型链的方式去拿索引
             * const index = Array.prototype.indexOf.call(liList, target);
             * 方法二：将 liList强制转换成一个真数组，推荐这种写法，更符合现代 ES6的写法，可读性也会更强。             
             */
            const realLiList = Array.from(liList);
            const index = realLiList.indexOf(target);

            alert(`内容为${target.innerHTML}, 索引为${index}`)
        }
    })