替换过时的“ keypress” DOM事件

Question

根据MDN article keypress事件被弃用：

但是我在其他地方找不到关于是否应在新项目中使用此事件的任何信息。如果我们不应该，那么替代品是什么？

有人可以提供见解吗？

Answer 1

由于不建议使用该事件，因此应避免在新代码中使用它，并计划将其从旧代码中删除。 W3C specification表示关于不推荐使用的功能：

  

标记为已弃用的功能已包含在规范中，以作为对较早的实现或规范的引用，但是是可选的，不鼓励使用。在本规范中，仅应弃用具有现有或正在进行的替换功能。尚不包括对功能的支持的实现可能会出于与现有内容向后兼容的原因而实现不推荐使用的功能，但是创建内容的内容作者不应该使用不推荐使用的功能，除非没有其他方法可以解决用例强>。引用本规范的其他规范不应使用不推荐使用的功能，而应指出赞成不推荐使用该功能的替换。在本规范中标记为不推荐使用的功能有望从将来的规范中删除。

keypress event的规范说：

  

警告在此规范中定义了按键事件类型，以供参考和完整性，但此规范不赞成使用此事件类型。在编辑上下文中，作者可以改为订阅beforeinput事件。

您还可以使用keydown和/或keyup事件。参见What's the difference between keyup, keydown, keypress and input events?

但是，由于beforeinput尚无太多支持，因此如果这些其他事件都不适合您的用例，则您现在必须继续使用keypress（除非存在“是解决规范中“用例”异常的另一种方法。

Answer 2

除非（或对您感到羞耻）您或您使用的某些东西在每次机会中肆意肆虐地冒泡，否则不要费力。

像这样简单但功能强大的实用程序，这正是为什么只对HTML的孤立节点叶子执行此操作的原因。

在那些确实需要防止keydown冒泡的情况下，您可以简单地将以下内容包装在一个以参数代替document.body的函数中，如果您仍然想要'keypress2'，则只需在停止冒泡的位置应用该HMTL可用的事件。

const keyBlacklist = [
    'Shift',
    'Alt',
    'Control',
    'Meta'
];

document.body.addEventListener('keydown',(e)=>{
    if(keyBlacklist.indexOf(e.key) === -1){
        const newKeyPress = new CustomEvent('keypress2',{detail:e});
        e.target.dispatchEvent(newKeyPress);
    }
});

document.body.addEventListener('keypress2',e=>{console.log(e.detail);});