如何使 Javascript “focusout”事件只触发一次？

Question

这是我目前的 function：

document.getElementById('textarea').addEventListener('focusin', () => {
    document.getElementById('UserTextArea').classList.add('text-selected');
    document.getElementById('textarea').style.marginBottom = "0px";

    document.getElementById('textarea').addEventListener('focusout', () => {
    let CommentText = document.querySelector('.textarea').innerText;
    chrome.storage.local.set({SavedComments: CommentText}, function() {
    });
});
});

它有效，并且功能强大。 然而，当我在其中插入一些“alert('hello world')”来测试它时，就清楚了吗？ “focusout”事件不会只触发一次。 它至少会触发几次，有时会触发很多次。 该程序可以运行，并且功能在那里 - 但是我担心的是，随着我向应用程序添加越来越多的功能，这个写得不好的代码会导致一些问题出现。

经进一步检查，这是怎么写的？ 似乎每次都会增加事件侦听器。 所以每次这个人专注于文本框，然后专注于文本框？ 它会再触发一次随附的 function。 所以对焦进出13次后，会连续发射13次。 第 20 次、连续 20 次等。

使“focusout”事件只触发一次的最干净的方法是什么？

谢谢！

Answer 1

似乎每次都会增加事件侦听器。

完全正确 - 每次focusin触发时都会添加一个focusout的事件侦听器，并且永远不会被删除。

始终为每个事件保留一个侦听器：

document.getElementById('textarea').addEventListener('focusin', () => {
    document.getElementById('UserTextArea').classList.add('text-selected');
    document.getElementById('textarea').style.marginBottom = "0px";
});

document.getElementById('textarea').addEventListener('focusout', () => {
    let CommentText = document.querySelector('.textarea').innerText;
    chrome.storage.local.set({SavedComments: CommentText}, function() {
    });
});

此外，如果.textarea是<textarea> ，您需要.value ，而不是.innerText 。 （并且textarea是它的 id 和 class 吗？）

另外，考虑使用 CSS 来应用边距更改，如果您不是故意没有在focusout中删除它：

#textarea:focus {
    margin-bottom: 0px;
}