替换已弃用的 `keypress` DOM 事件

Question

根据 MDN 文章

keypress

事件已弃用：

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

有人可以提供见解吗？

Answer 1

由于该事件已被弃用，您应该避免在新代码中使用它，并计划从旧代码中删除它。 W3C 规范 对于已弃用的功能有这样的规定：

标记为已弃用的功能包含在规范中作为旧实现或规范的参考，但它们是可选的且不鼓励使用。在本规范中，只有具有现有或正在进行的替换的功能才必须被弃用。尚未包含对该功能的支持的实现可以出于与现有内容向后兼容的原因实现已弃用的功能，但是创建内容的内容作者不应使用已弃用的功能，除非没有其他方法来解决用例。引用本规范的其他规范不应使用已弃用的功能，而应指向已弃用的功能的替代品。本规范中标记为弃用的功能预计将从未来的规范中删除。

keypress event

的规格说：

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

您还可以使用

keydown

和/或

keyup

事件。请参阅 keyup、keydown、keypress 和输入事件有什么区别？

但是，由于

beforeinput

还没有太多支持，如果这些其他事件都不适合您的用例，您现在必须继续使用

keypress

（这就是“除非没有其他方法来解决”规范中的“用例”例外）。

Answer 2

const handleKeyDown = (e: any) => {
  if (e.code === "Enter") {
  triggerBusqueda(e.target.value);
  }
};

onKeyDown={handleKeyDown}

Answer 3

解决起来并不困难，除非（为你感到羞耻）你或你使用的东西一直在每一个机会不加区别地破坏事件冒泡。

像这样简单但功能强大的实用程序正是您应该只对 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);});