为什么事件委派会在每次点击时计算我的 addEventListener("submit") 的点击次数？

Question

大家好！

在这种情况下，我想做一个单页应用程序
这总是需要添加、加载、编辑或删除 HTML 元素
然后我发现了一些烦人的问题，
当我的事件提交的每次点击也计算该点击时，
像我第二次点击那个提交，会导致两次数据提交
再次点击第三次提交，会导致提交三次数据，以此类推。

我的代码说明：
我有一个数据表，在每一行都有一个按钮来编辑当前数据，当用户单击该按钮时，它将向页面添加一个新表单，这就是我的问题，当我提交该表单时编辑事件委托正在计算我的事件也影响了提交的数据量

var el_tbl_body = document.getElementById("tbody");
el_tbl_body.addEventListener("click", function (event) {
    var this_el = event.target;
    // Handling error
    if (typeof this_el.attributes.id !== "undefined") {
        // Click only work in id="edit-datatable"
        if (this_el.attributes.id.value === "edit-datatable") {
            // This method for holding add another form edit datatable
            // so it will be only one form
            if (document.getElementById("form-edit-datatable") !== null) {
                document.getElementById("form-edit-datatable").parentNode.remove();
            }
            var new_form = document.createElement("div");
            new_form.innerHTML = 
                '<form action="#" method="POST" id="form-edit-datatable">' +
                    '<input type="text" id="edit-name" value="Example value" required/>' +
                    '<input type="submit" id="submit-edit-datatable" value="Ubah data"/>' +
                '<form/>';
            this_el.parentNode.insertBefore(new_form, this_el);
        }
        
        if (document.getElementById("form-edit-datatable") !== null) {

            // The problem is in here
            document.getElementById("form-edit-datatable").addEventListener("submit", function (ev) {
                ev.preventDefault();
                console.log("data has been send") 
            });
        }
    }
});

<table id="table">
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>address</th>
                </tr>
            </thead>
            <tbody id="tbody">
                 <tr>
                     <td>3778</td>
                     <td>John Doe</td>
                     <td>Paris</td>
                     <td><button id="edit-datatable">Edit Data</button></td>
                 </tr>
                 <tr>
                     <td>2353</td>
                     <td>Eric Samuel</td>
                     <td>Hamburg</td>
                     <td><button id="edit-datatable">Edit Data</button></td>
                 </tr>
            </tbody>
        </table>

Answer 1

发生这种情况是因为当点击Form Submit 按钮时，它会传播到form_wrapper 点击侦听器，然后广告另一个侦听器等等。

您可以避免收听form-wrapper 的点击，只需执行以下操作：

var btn_addNewForm = document.getElementById("add-newForm");
var form_wrapper = document.getElementById("form-wrapper");

btn_addNewForm.addEventListener("click", function (event) {
  form_wrapper.innerHTML =
    '<form action="#" method="POST" id="new-form">' +
      '<input type="submit" value="Form Submit"/>'
    '</form>';
  document.getElementById("new-form").addEventListener("submit", function (evt) {
    evt.preventDefault();
    console.log("Form Data")
  });
});

Answer 2

    var btn_addNewForm = document.getElementById("add-newForm");
var form_wrapper = document.getElementById("form-wrapper");

btn_addNewForm.addEventListener("click", function (event) {
  form_wrapper.innerHTML =
    '<form action="#" method="POST" id="new-form">' +
      '<input type="submit" value="Form Submit"/>'
    '</form>';
});

// Start Event Delegation
window.addEventListener("submit", function(event){
    event.preventDefault();
    console.log("Form Data")
    })

    <button id="add-newForm">Add New Form</button>
    <div id="form-wrapper"></div>

查看可能有帮助的更改。您可以将提交事件委托给表单或窗口对象。

Answer 3

修改

form_wrapper.addEventListener("click", function(event){
  document.getElementById("new-form").addEventListener("submit", function (evt) {
    evt.preventDefault();
    console.log("Form Data")
  });
});

到

document.getElementById("new-form").addEventListener("submit", function (evt) {
    evt.preventDefault();
    console.log("Form Data")
  });