通过冒泡处理许多元素的点击事件答案

【问题标题】：Handling click events for many elements by bubbling通过冒泡处理许多元素的点击事件
【发布时间】：2014-11-21 17:18:30
【问题描述】：

我有一个包含在名为 overlay-controls 的父 div 中的控件列表。

有许多列表控件，每个控件都有自己的overlay-controls。

我正在使用 for 循环将事件侦听器添加到包含 delete 类的每个按钮。

在用户可以删除项目之前，他们必须确认。我正在尝试将此附加到覆盖控件中的每个删除按钮。

我使用 for 循环让它工作，但我知道使用冒泡和捕获有更好的方法。我无法通过冒泡到父 div 来仅定位覆盖控件内的删除类。

点击每个删除按钮在此处查看现场演示：http://jsfiddle.net/8qqfeoa2/1/

这是我使用 for 循环的代码：

 (function() {
        function getConfirmation(e){
            var retVal = confirm("Are you sure you want to delete this request?");
            if( retVal == true ){
               return true;
            }else{
               e.preventDefault();
               return false;
            }
         }

        var del = document.querySelectorAll('.delete');

        for(var i = 0, len = del.length; i < len; i++){
        del[i].addEventListener('click', function(e) {
            getConfirmation(e);
        }, false);
        }

    }());

【问题讨论】：

您将问题标记为 jQuery，但似乎完全避免使用它。这是有原因的吗？
希望避免使用 jQuery，（出于学习目的）但会考虑使用 jQuery 解决方案。

标签： javascript jquery html events javascript-events

【解决方案1】：

你不需要 For / .each 循环

Jquery 在内部处理它

$('.delete').on('click', function(e){ getConfirmation(e); });

如果您使用的是 jQuery，并且在 getConfirmation 方法中，您还可以使用 e.target 获取该特定（点击）元素，该元素返回发生点击的目标。

【讨论】：

这项工作很想看到一个仅限 javascript 的解决方案，不需要更改我的方法 getConfirmation(e)，因为我们已经针对删除按钮。
给你var deletebuttons = document.getElementsByClassName('delete'); for(var button in deletebuttons) { button.onclick = getConfirmation; }

【解决方案2】：

仅 Javascript 解决方案

如你所愿

var deletebuttons = document.getElementsByClassName('delete'); for(var button in deletebuttons) { button.onclick = getConfirmation; }

【讨论】：