星途面试题库

面试题：JavaScript中this在复杂DOM事件委托里的应用

有一个包含多个列表项的无序列表，使用事件委托为所有列表项添加点击事件。在点击事件处理函数中，需要根据this来判断当前点击的列表项是否为偶数项（从0开始计数），如果是则在控制台输出该项的索引值。请编写完整的HTML和JavaScript代码实现该功能。

16.2万热度

难度

编程语言JavaScript

知识考点

面试题答案

一键面试

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <ul id="list">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
    </ul>
    <script>
        const list = document.getElementById('list');
        list.addEventListener('click', function (event) {
            if (event.target.tagName === 'LI') {
                const index = Array.from(this.children).indexOf(event.target);
                if (index % 2 === 0) {
                    console.log(index);
                }
            }
        });
    </script>
</body>

</html>