如何获取DOMSubtreeModified事件的keyCode/key/which属性值

根本原因 #

DOMSubtreeModified属于DOM结构变动类事件，和键盘输入事件属于完全不同的事件类型：

• 该事件的触发时机是监听节点的子树结构、文本内容发生变更（比如节点增删、文本修改），触发源可能是脚本修改、用户粘贴、键盘输入、富文本编辑器操作等任意会改动DOM的行为，并不和键盘操作强绑定
• 事件对象上仅携带DOM变动相关的属性，天生不存在keyCode、key这类键盘事件专属属性，强行读取自然会得到undefined
• 额外注意：DOMSubtreeModified目前已经是W3C明确废弃的API，存在性能差、事件触发时机不稳定、容易造成循环触发等问题，生产环境不建议使用

对应开发需求的正确实现 #

你需要根据自己的实际业务场景选择对应的监听方案：

1. 需求是监听DOM内容/结构变动
   请使用标准替代API MutationObserver，参考实现代码：

   const target = document.querySelector('.word');
   // 配置需要监听的变动类型
   const observerConfig = {
       childList: true, // 监听子节点增删
       subtree: true, // 覆盖所有后代节点
       characterData: true // 监听文本内容变动
   };
   const observer = new MutationObserver((mutations) => {
       mutations.forEach(mutation => {
           console.log('捕获到DOM变动，变动类型：', mutation.type);
       })
   });
   observer.observe(target, observerConfig);
   // 不需要监听时可以调用 observer.disconnect() 停止监听
   

2. 需求是获取用户输入时的按键编码
   不要绑定DOM变动事件，直接给目标元素绑定键盘事件即可，注意只有可聚焦、可编辑的元素（input、textarea、设置了contenteditable="true"的元素）才能触发键盘事件，参考jQuery实现：

   $('.word').on('keydown', function(e) {
       console.log('按下按键的keyCode：', e.keyCode);
       console.log('按下的按键值：', e.key);
   });
   

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