JavaScript事件委托：解决嵌套元素中getAttribute失效的问题-js教程-PHP中文网

JavaScript事件委托：解决嵌套元素中getAttribute失效的问题

本文旨在解决javascript事件委托中，当`li`等父元素包含嵌套子元素时，通过`getattribute`获取`data-*`属性时可能返回`null`的问题。核心在于区分`event.target`和`event.currenttarget`。`event.target`指向实际点击的元素，而`event.currenttarget`指向事件监听器绑定的元素。通过使用`event.currenttarget`，可以确保在事件委托场景下始终准确获取到委托元素的属性，从而避免常见的开发陷阱。

在现代前端开发中，事件委托（Event Delegation）是一种优化性能和简化代码的常用技术。它允许我们将事件监听器绑定到父元素上，而不是为每个子元素单独绑定。当子元素上的事件被触发时，事件会沿着DOM树冒泡到父元素，由父元素的监听器捕获并处理。然而，在使用事件委托时，一个常见的陷阱是错误地使用事件对象中的属性来获取目标元素的信息，特别是当委托元素内部包含其他HTML标签时。

事件委托中的getAttribute失效问题

考虑以下场景：我们有一个无序列表

元素，每个
元素都带有一个data-value属性。我们希望通过点击

来获取其data-value属性值。

初始HTML结构：

<ul id="_listus">
    <li data-value="name1">Name 1</li>
    <li data-value="name2">Name 2</li>
</ul>
<input id="hdId" type="hidden" />

对应的JavaScript（使用jQuery进行事件委托）：

立即学习“Java免费学习笔记（深入）”；

$("#_listus").on('click', 'li', function (e) {
    const domIndex = e.target.getAttribute('data-value');
    $('#hdId').val(domIndex);
});

在这种情况下，代码可以正常工作，点击

元素时，domIndex会正确地获取到data-value属性值。
然而，当

元素内部包含其他HTML标签，例如一个

时，问题就出现了：

修改后的HTML结构：

<ul id="_listus">
    <li data-value="name1"><div class="class1">Name 1</div></li>
    <li data-value="name2"><div class="class1">Name 2</div></li>
</ul>
<input id="hdId" type="hidden" />

使用相同的JavaScript代码点击

Gradle 9.8.0

下载

中的文本（实际上是点击了
），domIndex的值会变为null。这是因为e.target不再指向带有data-value属性的
元素。
理解event.target与event.currentTarget

要解决这个问题，我们需要深入理解事件对象（event）的两个关键属性：event.target和event.currentTarget。
1. event.target:
  - event.target指向实际触发事件的元素。它代表了DOM树中事件最初发生的最深层元素。
  - 在上述修改后的HTML示例中，当用户点击
  - 内部的“Name 1”文本时，实际点击的是
    元素。因此，e.target将是该
    元素。由于
    元素没有data-value属性，调用getAttribute('data-value')自然会返回null。
  - event.currentTarget:
    - event.currentTarget指向当前处理事件的元素，即事件监听器所绑定到的元素。在事件委托的场景中，它指的是匹配委托选择器（在jQuery的on方法中，即第二个参数'li'）的那个元素。
    - 无论用户点击
    - 本身，还是
    - 内部的任何子元素（如
      ），事件都会冒泡。当事件到达$("#_listus").on('click', 'li', ...)这个监听器时，event.currentTarget始终会是那个匹配了'li'选择器的
    - 元素。
    - 内部结构如何复杂，我们都能稳定地获取到
    - 元素自身的data-value属性。
      完整示例
      
      以下是一个完整的HTML和JavaScript示例，演示了如何正确处理带有嵌套元素的事件委托：
```
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托中获取属性的正确姿势</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; }
        ul { list-style: none; padding: 0; }
        li {
            padding: 10px;
            margin-bottom: 5px;
            border: 1px solid #ccc;
            cursor: pointer;
            background-color: #f9f9f9;
        }
        li:hover {
            background-color: #e9e9e9;
        }
        .class1 {
            color: #333;
            font-weight: bold;
        }
        input {
            margin-top: 20px;
            padding: 8px;
            border: 1px solid #ddd;
            width: 200px;
        }
    </style>
</head>
<body>

    <h1>事件委托中的`getAttribute`问题与解决方案</h1>

    <h2>示例列表</h2>
    <ul id="_listus">
        <li data-value="item1">
            <div class="class1">项目 1 (点击这里)</div>
        </li>
        <li data-value="item2">
            <span>项目 2 (点击这里)</span>
        </li>
        <li data-value="item3">项目 3 (直接点击)</li>
    </ul>

    <p>当前选中的值：</p>
    <input id="hdId" type="text" readonly placeholder="点击列表项获取值" />

    <script>
        $(document).ready(function() {
            $("#_listus").on('click', 'li', function(e) {
                // e.target 是实际点击的元素 (可能是div, span或li本身)
                // e.currentTarget 是事件监听器所绑定的元素 (始终是li)
                const domIndex = e.currentTarget.getAttribute('data-value');
                $('#hdId').val(domIndex);
                console.log("实际点击的元素 (e.target):", e.target.tagName);
                console.log("处理事件的元素 (e.currentTarget):", e.currentTarget.tagName);
                console.log("获取到的data-value:", domIndex);
            });
        });
    </script>

</body>
</html>
```
      注意事项与最佳实践
      - this关键字在jQuery中: 在jQuery的事件处理函数内部，this关键字通常指向event.currentTarget。因此，在jQuery环境中，你也可以直接使用$(this).attr('data-value')或this.getAttribute('data-value')来达到同样的目的。
        $("#_listus").on('click', 'li', function (e) { // 在jQuery回调中，`this`通常指向`e.currentTarget` const domIndex = $(this).attr('data-value'); // jQuery方式 // 或者： // const domIndex = this.getAttribute('data-value'); // 原生JS方式 $('#hdId').val(domIndex); });
      - 选择合适的事件属性:
        当需要知道用户具体点击了哪个子元素时（例如，点击了
        还是），使用event.target。
        当需要知道是哪个委托元素（即事件监听器所绑定的元素）触发了事件，并且需要获取该委托元素的属性时，使用event.currentTarget或this。
        
        可读性与维护性: 始终选择最能清晰表达意图的属性。对于事件委托，获取委托元素的属性通常是更常见的需求，因此event.currentTarget或this是更好的选择。
        
        总结
        
        在JavaScript事件委托中，正确区分和使用event.target与event.currentTarget（或jQuery中的this）至关重要。event.target指向事件发生的实际元素，而event.currentTarget指向事件监听器绑定的元素。当委托元素内部包含嵌套结构时，为了 reliably 获取委托元素的属性，应始终使用event.currentTarget。掌握这一概念将帮助开发者避免常见的事件处理陷阱，并编写出更健壮、更易维护的代码。