currentTarget 事件属性

什么是 currentTarget

currentTarget 是事件对象（event object）上的一个属性，它指向触发事件的元素，即事件当前正在被处理的元素。与之相对的是 target 属性，它指向触发事件的最初的元素。

currentTarget 与 target 的区别

为了更好地理解 currentTarget 和 target 的区别，我们来看一个示例：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>currentTarget vs target</title>
    <style>
        .outer {
            padding: 20px;
            background-color: lightblue;
        }
        .inner {
            padding: 10px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            Click me
        </div>
    </div>
    <script>
        const outer = document.querySelector('.outer');
        const inner = document.querySelector('.inner');

        function handleClick(event) {
            console.log('currentTarget:', event.currentTarget);
            console.log('target:', event.target);
        }

        inner.addEventListener('click', handleClick);
    </script>
</body>
</html>

在这个示例中，我们有一个外层元素 .outer 和一个内层元素 .inner，内层元素上绑定了一个点击事件。当我们点击内层元素时，currentTarget 会指向外层元素 .outer，而 target 会指向内层元素 .inner。

currentTarget 的应用场景

currentTarget 在实际开发中有许多应用场景，比如事件委托（event delegation）、事件代理（event delegation）、事件冒泡（event bubbling）等。其中，事件委托是一种常见的利用 currentTarget 的技术，它可以减少事件处理程序的数量，提高性能。

示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Delegation</title>
</head>
<body>
    <ul id="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <script>
        const list = document.getElementById('list');

        function handleClick(event) {
            if (event.target.tagName === 'LI') {
                console.log('You clicked on:', event.target.textContent);
            }
        }

        list.addEventListener('click', handleClick);
    </script>
</body>
</html>

在这个示例中，我们有一个无序列表 <ul>，里面有三个列表项 <li>。我们给 <ul> 绑定了一个点击事件处理函数 handleClick，并通过判断 event.target.tagName 是否为 LI 元素来确定用户点击了哪个列表项。

总结

通过本文的介绍，我们了解了 currentTarget 事件属性的含义、与 target 的区别以及应用场景。在实际开发中，灵活运用 currentTarget 可以帮助我们更好地处理事件，提高代码的可维护性和性能。希望本文能对你有所帮助！