input事件监听重复触发console.log：输入长度为3时仅输出一次

有一个ID为#input_code_ + rowNumber的表单输入字段，已绑定input事件监听器。需求是仅当输入值长度为3时触发一次console.log()，但当前脚本会触发两次日志输出。

当前代码：

// COUNT COLOR CODE CHARACTERS
function countColorCodeCharacters(rowNumber){

    // Listen to the input for the color code
    document.querySelector('#input_code_' + rowNumber).addEventListener('input', function(e){

        // Get the value of the color code
        colorInput = e.target.value;

        // If the value length is 3, log in console
        if(e.target.value.length === 3) {
            console.log("colorLength: 3");
            console.log("colorValue: " + e.target.value); 
          }
    });
}

问题根源是input事件会在多种场景触发（比如手动输入字符、粘贴内容、浏览器自动补全），导致输入值长度达到3时，回调函数被多次执行。以下两种方法可实现仅输出一次的需求：

方法1：闭包维护触发状态（支持重复触发场景） #

给每个输入框单独维护一个状态标记，记录是否已经输出过日志；同时支持用户删除字符后再次输入到长度3时重新触发：

// COUNT COLOR CODE CHARACTERS
function countColorCodeCharacters(rowNumber){
    // 初始化状态：未触发过日志
    let hasLogged = false;
    const inputElement = document.querySelector('#input_code_' + rowNumber);

    inputElement.addEventListener('input', function(e){
        const colorValue = e.target.value;

        // 长度为3且未触发过日志时执行输出
        if(colorValue.length === 3 && !hasLogged) {
            console.log("colorLength: 3");
            console.log("colorValue: " + colorValue); 
            hasLogged = true;
        }
        // 若用户删除字符导致长度小于3，重置状态
        else if(colorValue.length < 3) {
            hasLogged = false;
        }
    });
}

方法2：触发后移除事件监听器（仅需一次触发场景） #

如果只需要在输入框的生命周期内触发一次日志，后续不管输入内容如何变化都不再触发，可在触发后直接移除事件监听器：

// COUNT COLOR CODE CHARACTERS
function countColorCodeCharacters(rowNumber){
    const inputElement = document.querySelector('#input_code_' + rowNumber);

    // 定义独立的回调函数，方便后续移除
    function handleInput(e){
        const colorValue = e.target.value;
        if(colorValue.length === 3) {
            console.log("colorLength: 3");
            console.log("colorValue: " + colorValue); 
            // 触发后立即移除事件监听
            inputElement.removeEventListener('input', handleInput);
        }
    }

    inputElement.addEventListener('input', handleInput);
}

内容的提问来源于stack exchange，提问作者Camdenmoo