事件委托：影响更多元素

Question

I'm learning event delegation, and I encounter a problem. 我正在学习事件委托，但是遇到问题。

At first, when I did the first draft, if I clicked in the < span > it would only delete the text and not the button, so I modified it. 首先，当我做初稿时，如果单击<span>，它将只删除文本，而不是按钮，因此我对其进行了修改。 Later, when clicking the container div it deleted the whole thing, so I changed it again. 后来，当单击容器div时，它删除了整个内容，因此我再次对其进行了更改。

Right now it's functional, but it seems to me that it could be written more generically (without needing to add the class names, just the id of the container) and in a more efficient way, I feel there is a lot more code than it should be. 现在它可以正常工作了，但是在我看来，它可以更通用地编写（无需添加类名，只需添加容器的ID），并且以一种更有效的方式，我觉得比它有更多的代码应该。

And one more thing: It should work with dynamically added elements. 还有一件事：它应该与动态添加的元素一起使用。

Any help would be very appreciated! 任何帮助将不胜感激！

 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

In a JS event, e.target is the element the action (click) is performed on and this the element the code is attached to. 在JS事件中， e.target是对其执行操作（单击）的元素，而this元素是代码所附加的元素。 That can be used to check if the parentNode is the div the click was attached to (well, the same could be done by checking if the parent is the div by its id, but since it's an event delegation excercise, this is more fun :) ) 这可以用来检查parentNode是否是单击所附加到的div（好吧，也可以通过检查父代是否是通过其id的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 小提琴

As a side note, instead of adding a <BR> under each div, you can also alter the margin through css with something like 附带说明一下，您也可以通过以下方式通过CSS更改边距，而不是在每个div下添加<BR>

.bot{
    margin-bottom:20px;
}

This has the advantage that removed elements hold the same space (unless of course, that is not the intention ;) ) 这样做的好处是，被删除的元素拥有相同的空间（当然，除非不是故意的；））

Example: fiddle 例如：小提琴

事件委托：影响更多元素

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-07-08 18:12:50

事件委托：影响更多元素

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-07-08 18:12:50

解决方案1
1 已采纳 2015-07-08 18:12:50