点击按钮后停止一个输入框继承另一个输入框的值

要实现点击按钮后停止两个输入框的值同步，核心是移除输入框A的keyup事件监听——因为原代码用的是匿名函数，无法直接移除，所以需要先把回调函数提取为命名函数：

<input type="text" id="a"/>
<input type="text" id="b" disabled/>
<button id="btn">Stop</button>
<script>
    // 提取命名的同步函数
    function syncSlug() {
        document.querySelector('#b').value = document.querySelector('#a').value;
    }
    
    // 给输入框a绑定事件监听
    const inputA = document.querySelector('#a');
    inputA.addEventListener('keyup', syncSlug);
    
    document.querySelector('#btn').addEventListener('click', () => {
        // 移除输入框a的keyup监听，终止同步逻辑
        inputA.removeEventListener('keyup', syncSlug);
        // 启用输入框b
        document.querySelector('#b').disabled = false;
    });
</script>

关键说明： #

• 匿名函数无法通过removeEventListener移除，因此必须提前定义命名函数syncSlug
• 点击按钮时，先执行移除监听操作终止同步，再启用输入框b

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