addEventListener on dynamicaly created elements vs addEventListener on already existing elements in-CodePudding

Description

In my example,for the HTML part, i have an input and a button right next to it and under those a paragraph, followed by an unordered list at the bottom.

Typing in the input area and pressing enter, adds a new list item.

At the top of the JavaScript code, i have an eventlistener, triggered by any keyboard input. Clicking on the button(doubleclick), paragraph or the dynamicaly added list items, will display a message(the element type-name) in the console area.

Behavior

Lets say i type the word yess in the input field. Then i sumbit it pressing enter. That is total of 5 keyboard inputs and so i when i click the paragraph(click) or the button(dblclick) i get the console message 5 times each time i click or the paragraph or each time i double click the button. However, clicking on the list item(click) that was just created, no matter if i press more keys, the message only appears to be unique, so only 1 time.

Question

So my question is, why is it only one message and why 5 messages? I would like to know the mechanism of action behind all this program, including the 5 messages when i type 5 times. (Also about the single message, im suspecting its because for every keyup event, the const li is unique every time(since its inside the code block). Because having it (the const li) outside of the code block, and then trying to add list items, it only adds 1 on the first enter hit, and then updates the same li. And so, when i click on it, it prints 5 messages in the console area.)

Better to be run in full page for it to be fully visible.

https://jsfiddle.net/hj2e18f6/23/

const inpt = document.querySelector("#inpt");
/* const li = document.createElement("li"); */

inpt.addEventListener("keyup", function(event) {

  const par = document.querySelector("#par");
  const btn = document.querySelector("#btn");
  const li = document.createElement("li");
  const list = document.querySelector("#list");

  if (event.keyCode === 13) {
    li.innerHTML = inpt.value;
    list.appendChild(li);
  }


  par.addEventListener("dblclick", function() {
    console.log("p");
  });
  li.addEventListener("dblclick", function() {
    console.log("li");
  });
  btn.addEventListener("click", function() {
    console.log("btn");
  });
});

<div >
  <input id="inpt">
  <button id="btn"></button>
  <p id="par">par</p>
  <ul id="list"></ul>
</div>

CodePudding user response：

On the element you already have added an event listener, you don't need to add another one. On every key up, the eventlisteners for the objects that already exist are adding up. So I changed your code here:

const inpt=document.querySelector("#inpt");
const li = document.createElement("li");

const par = document.querySelector("#par");
const btn = document.querySelector("#btn");

par.addEventListener("dblclick", function() {
  console.log("p");
});

li.addEventListener("dblclick", function() {
  console.log("li");
});

btn.addEventListener("click", function() {
  console.log("btn");
});

inpt.addEventListener("keyup", function(event) {
    
        const li = document.createElement("li");
    const list= document.querySelector("#list");
    
    if(event.keyCode === 13){
        li.innerHTML= inpt.value;
            list.appendChild(li);
    } 
    
});

<div >
  <input id="inpt">
  <button id="btn"></button>
  <p id="par">par</p>
  <ul id="list"></ul>
</div>