事件委托：影响更多的元素

Question

我正在学习事件委托，但遇到了问题。

当初我做初稿的时候，点击只会删除文字，不会删除按钮，所以我修改了。后来点击容器的时候div整个东西都删了，所以我又改了。

现在它可以正常工作，但在我看来它可以更通用地编写（不需要添加 class 名称，只需添加容器的 id）并且以更有效的方式，我感觉代码比应有的多很多。

还有一件事：它应该适用于动态添加的元素。

任何帮助将不胜感激！

function getTarget(e) {
    return e.target;
}

function remove(e) {
    var target = getTarget(e);
    target.parentNode.removeChild(target);
}

function remove1(e) {
    var target = getTarget(e);
    var parent = target.parentNode;
    parent.parentNode.removeChild(parent);
}

document.getElementById("contenedor").addEventListener("click", function (e) {
 if (e.target && e.target.nodeName === "DIV" && e.target.classList.contains("bot")) {
  remove(e);
 }
    if (e.target && e.target.nodeName === "SPAN") {
  remove1(e);
 }
    document.getElementById("parrafo").textContent  = "Hice click en";
});

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="contenedor">
    <div class="bot" id="boton" style="width:200px; height:50px; background-color: red"><span>asdasd</span></div>
    <br>
    <div class="bot" id="boton1" style="width:200px; height:50px; background-color: red"><span>asdasd</span></div>
    <br>
    <div class="bot" id="boton2" style="width:200px; height:50px; background-color: red"><span>asdasd</span></div>
    <br>
    <div class="bot" id="boton3" style="width:200px; height:50px; background-color: red"><span>asdasd</span></div>
    <br>
    <div class="bot" id="boton4" style="width:200px; height:50px; background-color: red"><span>asdasd</span></div>
    <br>
    <div class="bot" id="boton5" style="width:200px; height:50px; background-color: red"><span>asdasd</span></div>
    </div>
    <br>
<script src="script.js"></script>
</body>
</html>

Answer 1

在 JS 事件中，e.target 是对其执行操作（单击）的元素，this 是附加代码的元素。这可以用来检查 parentNode 是否是点击所附加的 div（好吧，同样可以通过检查父节点是否是 div 来完成，但由于它是一个事件代表团练习，this更好玩:))

document.getElementById("contenedor").addEventListener("click", function (e) {
    var target = e.target;
    if(target!==this){ //if the div itself is clicked do nothing
        while(target.parentNode !== this) //loop up until it's a direct parent, this also works with multiple nested elements
            target = target.parentNode;
        target.parentNode.removeChild(target);
    }
    document.getElementById("parrafo").textContent  = "Hice click en";

});

fiddle

作为旁注，除了在每个 div 下添加 <BR>，您还可以通过 css 更改边距，例如

.bot{
    margin-bottom:20px;
}

这样做的好处是删除的元素保持不变 space（当然，除非这不是本意；））

示例：fiddle

事件委托：影响更多的元素

Event Delegation: Affecting more elements than it should

javascript

event-delegation