如何让继承contenteditable属性的元素捕获keydown事件？

问题梳理 #

需要在div#content容器内捕获任意子元素的keydown事件，获取触发元素和按键信息，但当前给父容器设置contenteditable时，子元素无法触发单独绑定的keydown监听器；逐个给子元素设contenteditable又不够优雅。

最优解决方案：事件委托 #

直接把keydown事件绑定到父容器上，利用事件冒泡机制捕获所有子元素的按键事件，无需单独处理每个子元素。

完整代码实现 #

HTML（保持不变）

<div id="content">
    <p id="paragraph">Coding is fun.</p>
    <!-- 可添加更多子元素 -->
</div>

<button id="buttonEditable">toggleEditable</button>

JavaScript（优化后）

const buttonEditable = document.getElementById("buttonEditable");
const contentDiv = document.getElementById("content");

// 事件委托：在父容器上监听所有子元素的keydown事件
contentDiv.addEventListener('keydown', handleKeydown);

function handleKeydown(event) {
    // 可选：阻止TAB键默认切换焦点的行为，按需启用
    if (event.key === 'Tab') {
        event.preventDefault();
    }
    console.log(event.key); // 输出触发的按键（如TAB）
    console.log(event.target); // 输出触发事件的具体子元素（如paragraph）
}

buttonEditable.addEventListener('click', toggleEditableState);

function toggleEditableState() {
    // 用布尔值判断更简洁，避免字符串匹配的坑
    contentDiv.contentEditable = !contentDiv.isContentEditable;
}

关键优化细节 #

1. 事件委托的优势：不管容器内有多少子元素，只需在父容器上绑定一次事件，所有子元素的keydown事件都会通过冒泡被捕获，event.target会准确指向触发事件的那个子元素。
2. 简化状态切换：isContentEditable是布尔属性，直接取反赋值给contentEditable，比判断字符串'true'/'false'更可靠，避免大小写或拼写错误。
3. 继承可编辑状态：父容器设contenteditable="true"时，所有子元素默认继承可编辑状态（等效于contenteditable="inherit"），无需单独给子元素设置该属性。

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