为什么 Event Delegation 在每次点击时都计算点击我的 addEventListener("submit")？

Question

大家好！

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

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

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

    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>

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

Answer 2

修改

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

Answer 3

发生这种情况是因为当 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")
  });
});

为什么 Event Delegation 在每次点击时都计算点击我的 addEventListener("submit")？

Why Event Delegation is counting click my addEventListener("submit") on every click?

javascript

html

dom

events

native