Question

我学习事件授权，我遇到了问题。

首先，当我完成初稿时，如果我点击了＆lt; span＆gt;它只会删除文本而不是按钮，所以我修改了它。之后，当点击容器div时，它删除了整个内容，所以我再次更改了它。

现在它功能齐全，但在我看来，它可以更通用地编写（无需添加类名，只需要容器的id），并且以更有效的方式，我觉得代码要多得多。

还有一件事：它应该与动态添加的元素一起使用。

非常感谢任何帮助！

＆＃13;

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";
});

＆＃13;

<!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>

＆＃13;

Answer 1

在JS事件中，e.target是执行操作（单击）的元素，this是代码附加到的元素。这可以用来检查parentNode是否是附加了click的div（嗯，同样可以通过检查父对象是否是div的div来完成，但因为它是一个事件委托练习，{ {1}}更有趣:)）

this

}）;

fiddle

作为旁注，不要在每个div下添加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";，也可以通过css改变边距

<BR>

这样做的好处是被移除的元素保持相同的空间（当然，这不是意图;）

示例：fiddle

事件委派：影响更多元素而不是它应该

1 个答案: