为什么 addEventListener 触发事件

Question

addNode_button 单击事件处理程序正在等待输入以执行某些操作。但我想通过按 esc 键停止事件侦听器。我做了一个简化的例子，它表明 addEventListener in keydown fire 'click' on button。我不明白为什么。

addNode_but.addEventListener('click',addNodeButClick);
function addNodeButClick(){
        let value = nodePt_inp.value;out1.value = new Date();
        let waitingValue = 'try to stop clock by escape,then input something to stop';
        function callMeAgain(){addNode_but.dispatchEvent(new Event('click'))};
        switch (value){
            case '': nodePt_inp.value = waitingValue;
            case waitingValue: setTimeout(callMeAgain,100);break;
            default:    out1.value = "only now I've stopped";
        }
}
document.addEventListener('keydown',escape);
function escape(evt){
    if (evt.key==='Escape'){
        addNode_but.removeEventListener('click',addNodeButClick);
        nodePt_inp.value = "";               
        addNode_but.addEventListener('click',addNodeButClick);
        }
}

<input style='display:block;width:60ch' type="text" id="nodePt_inp" name='pt'>
<button id='addNode_but' class='button'>clickMe and try to stop by esc</button>
<output id='out1'>output</output>

Answer 1

为了停止 setTimeout 调用，您应该参考该调用的结果并调用 clearTimeout

addNode_but.addEventListener('click',addNodeButClick);
var timerId = null;
function addNodeButClick(){
        let value = nodePt_inp.value;out1.value = new Date();
        let waitingValue = 'try to stop clock by escape,then input something to stop';
        function callMeAgain(){addNode_but.dispatchEvent(new Event('click'))};
        nodePt_inp.value = waitingValue;
        timerId = setTimeout(callMeAgain,100);
}
document.addEventListener('keydown',escape);
function escape(evt){
    if (evt.key==='Escape'){
        clearTimeout(timerId);
    }
}

<input style='display:block;width:60ch' type="text" id="nodePt_inp" name='pt'>
<button id='addNode_but' class='button'>clickMe and try to stop by esc</button>
<output id='out1'>output</output>

为什么 addEventListener 触发事件

why addEventListener fire the event

javascript

addeventlistener

removeeventlistener