处理事件监听器

Question

我正在做我大学的项目，它有点像基于网络文本的游戏。所以我对文档上的单击事件感兴趣以更改上下文，我使用下面的代码完成了它。

问题是它不断重复所有内容，不允许输入。

const homepage = document.querySelector('#homepage')

document.addEventListener('click', function() {
  /*I console.log to check that the function is still repeating*/
  console.log('check')
  homepage.innerHTML = `<div> hello what's your name? </div>`
  document.addEventListener('click', function() {
    homepage.innerHTML = `<div> my name is <br> 
<input id="name"> </input> <br>
<button> submit </button<
`
  })
})

#homepage {
  text-align: center;
}

<div id="homepage"> click to change the content </div>

Answer 1

这是给你的开胃菜：

const homepage = document.querySelector('#homepage');

let html = [
    "hello what's your name?",
    'my name is <br> <input id="name"> <br> <button> submit </button>'
];

document.addEventListener('click',function(){
    if (html.length) {
        homepage.innerHTML = html.shift();
    };
});

Answer 2

const texts = [
    "How are you?",
    "Tired of studying?",
    "Too long enough"
];

let textTake = 0;

document.addEventListener('click', ()=>{
    if(textTake >= texts.length) textTake = 0;  
    document.getElementById("homepage").innerText = texts[textTake];
    textTake++;
});

Answer 3

我将尝试解释下面发生的确切问题。

这是您的代码

const homepage = document.querySelector('#homepage')

// You are adding a click event listner to your DOM
// This will trigger when ever you click on your html page
document.addEventListener('click', function () { // Code Section 1
  console.log('this is a console log from first click event listner');
  homepage.innerHTML = `<div> hello what's your name? </div>`;

  // You are adding an another click event listner to your DOM
  document.addEventListener('click', function () { // Code Section 2
    
    console.log('this is a console log from second click event listner');
    homepage.innerHTML = `<div> my name is <br> 
                          <input id="name"> </input> <br>
                          <button> submit </button<
                          `;
  })
})

#homepage {
  text-align: center;
}

<div id="homepage"> click to change the content </div>

您已使用

向您的 document 添加了点击事件侦听器

document.addEventListener('click', function () {

（参考上面代码中添加的注释中的代码第 1 节）。

这会做什么？

每当您单击 html 页面上的任何位置时，这将执行写在该块内的整套代码。

那个代码块里面发生了什么？

在该代码块中，您正在使用

向 document 添加另一个点击事件

document.addEventListener('click', function () {

（参考上面代码中添加的注释中的代码第 2 节）。

到目前为止发生了什么？

您现在正在添加一个 click 事件监听器，每当用户点击 html 应用程序时。

那么这是什么意思呢？

这只是意味着您的代码将在用户单击应用程序时继续添加新的单击事件侦听器。所以如果用户在应用程序上点击一次，就会有两次点击事件监听器。如果用户点击第三次，将再添加一个事件监听器，这样事件监听器总数将是三个。这将继续增加。发生这种情况是因为，当存在先前的事件监听器时，您会继续添加新的点击事件监听器。

所以到底发生了什么错误？如何停止防止事件监听器堆积？

在添加新的事件监听器之前，您必须先删除事件监听器。为此，您可以使用 EventTarget.removeEventListener()。

使用EventTarget.removeEventListener()

实现

const homepage = document.querySelector('#homepage');

function listnerFunction() {
  console.log('first click event triggered');
  homepage.innerHTML = `<div> hello what's your name? </div>`;

  // Removing the first event listner
  document.removeEventListener('click', listnerFunction);
  
  // Adding second event listner
  document.addEventListener('click', secondListnerFunction);
}

function secondListnerFunction() {
  console.log('second click event triggered');
  homepage.innerHTML = `<div>
                            my name is <br> 
                            <input id="name"> </input> <br>
                            <button> submit </button>
                          </div>
                          `;
  // Removing the second event listner
  document.removeEventListener('click', secondListnerFunction);
}

// You are registering click event to your complete html
document.addEventListener('click', listnerFunction);

#homepage {
  text-align: center;
}

<div id="homepage"> click to change the content </div>

解释

这里我使用

给文档添加了一个点击事件监听函数

document.addEventListener('click', listnerFunction);

这会做什么？

这将在用户单击文档时触发函数 listnerFunction。

处理来自第一次点击事件监听器的第二次点击

在第一个点击事件监听器中 listnerFunction 我已经更新了您选择的元素的 innerHTML。在此之后，我用

删除了第一个点击事件监听器

document.removeEventListener('click', listnerFunction);

在我用

注册了第二次点击事件监听器之后

document.addEventListener('click', secondListnerFunction);

第二次点击事件监听器内部发生了什么？

在第二个点击事件监听器中，我更新了您所需目标的 innerHTML，并使用

删除了点击事件监听器

document.removeEventListener('click', secondListnerFunction);

需要删除点击事件监听器，此后每当用户点击文档时，都不会触发任何事件，因此用户可以无缝地使用该应用程序。

处理事件监听器

Handling the eventlistener

html

javascript

document

event-listener

onclicklistener