时间戳

首页 > 解决方案 > 添加新 div 时更新包含“div”数量的变量

javascript - 添加新 div 时更新包含“div”数量的变量

问题描述

如标题所述，有没有办法更新变量（链接到父级中有多少个 div）？我的代码有效，但我正在寻找另一种方式......我拥有的代码：

function addDiv() {
//adds a div into the parent
}

parent.addEventListener("mouseover", ()=>{
    getAllLists = parent.querySelectorAll(".list-name-tile")
    getAllLists.forEach(list => {
        list.addEventListener("click", ()=>{
           //other code
        })
    });
})

在我的代码中，我使用“鼠标悬停”来更新getAllLists；我只是想知道是否有另一种方法可以做到这一点并达到类似的效果，或者这是最好的方法？请让我澄清或如果您需要更多信息。

谢谢！

标签： javascripthtml

解决方案

在我看来，在 mouseover 事件侦听器中检索 div 元素是可以的。

但是，您的代码中存在问题。每次将鼠标悬停在父元素上时，点击事件监听器都会一遍又一遍地附加到子元素上。您可以通过在 click 事件处理程序中插入 console.log() 来尝试此操作。将鼠标悬停在父元素上几次，然后单击子元素。您将多次看到 console.log 的输出。

这是因为每次您将鼠标悬停在父元素上时都会附加 clicker 事件侦听器。

可能的解决方案

据我了解您的问题，您想为所有子元素（甚至是动态添加的子元素）添加一个点击事件监听器。如果是这种情况，您可以使用Event Delegation。

冒泡还允许我们利用事件委托——这个概念依赖于这样一个事实：如果您希望在选择大量子元素中的任何一个时运行某些代码，您可以在它们的父元素上设置事件侦听器并拥有事件这发生在他们身上会冒泡到他们的父母身上，而不是必须单独为每个孩子设置事件侦听器。请记住，冒泡涉及首先检查事件触发的元素是否有事件处理程序，然后向上移动到元素的父级，等等。

一个很好的例子是一系列列表项——如果您希望每个项在被选中时弹出一条消息，您可以在父项上设置 click 事件侦听器，事件将从列表项冒泡到 .

事件冒泡和捕获（向下滚动到“事件委托”部分）

通过事件委托，您可以这样做：

HTML

<div id="parent">
    <div class="list-name-tile">First div</div>
    <div class="list-name-tile">Second div</div>
</div>

JavaScript

const parent = document.getElementById("parent");

parent.addEventListener("click", e => {
    if (e.target.classList.contains("list-name-tile")) {
        // Do stuff
    }
});

function addDiv() {
    const div = document.createElement("div");
    div.classList.add("list-name-tile");
    div.textContent = "Next div";
    parent.appendChild(div);
}

addDiv();

在示例中，我已将单击事件侦听器附加到父元素。因此，每当您单击子元素时，事件都会“冒泡”到下一个祖先，即您的父元素。我们有事件监听器并且可以处理它。在示例中，我将其过滤为仅在触发事件的元素具有特定类时才执行某些操作。您还可以过滤特定事件等。

推荐阅读