原生JavaScript满足特定条件时如何触发keyup事件监听函数

你可以通过手动构造对应键盘事件并派发的方式触发绑定的监听，如果你可以调整原有代码结构，更推荐把业务逻辑抽离后直接调用，两种实现方式如下：

方式1：手动派发事件（无需修改原有监听代码） #

因为你原有监听绑定在document上，且判断条件是event.code === "NumpadEnter"，只需要在flag成立时构造符合参数要求的KeyboardEvent实例，再派发即可：

if(flag == true){
    // 构造keyup类型的键盘事件
    const numpadEnterUpEvent = new KeyboardEvent('keyup', {
        code: 'NumpadEnter', // 必须和原有判断的code值一致
        key: 'Enter',
        keyCode: 13, // 兼容依赖keyCode判断的旧逻辑
        bubbles: true,
        cancelable: true
    });
    // 派发事件触发监听
    document.dispatchEvent(numpadEnterUpEvent);
}

注意事项 #

• 构造事件时必须传入code: 'NumpadEnter'，否则原有监听的条件判断不会通过，业务逻辑不会执行
• 如果你的业务逻辑中还用到了事件对象的其他属性（比如altKey/ctrlKey等修饰键状态），需要在构造事件的配置对象中补充对应字段
• 若事件监听绑定在其他DOM元素上，需要调用对应元素的dispatchEvent方法，而不是document的

方式2：抽离逻辑直接调用（推荐，无兼容问题） #

如果你可以修改原有监听的代码，最简洁的方式是把要执行的业务逻辑抽成独立函数，需要触发时直接调用即可，不需要绕弯构造事件：

// 抽离NumpadEnter触发的业务逻辑
function onNumpadEnterTrigger() {
    // 原//some logic here的内容
}

// 原有事件监听直接调用抽离的函数
document.addEventListener("keyup", function(event) {
    if (event.code === "NumpadEnter") {   
         onNumpadEnterTrigger();    
    }
});

// 条件满足时直接调用函数即可
if(flag == true){
    onNumpadEnterTrigger();
}

这种写法没有事件构造的兼容问题，逻辑更清晰，后续维护也更方便，优先使用。

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