事件捕获与使用contentEditable div冒泡

Question

我正在处理内容可编辑的div，我需要处理在将字符添加到div之前和之后捕获关键笔划。

我对捕获与冒泡的理解是，事件首先被捕获在dom树中的最高级别，然后将其传递下来，而对于冒泡，它从最低级别开始并在树上冒泡。

基于这种理解，我认为如果我在捕获阶段添加了一个事件监听器，则可编辑div的内容将反映之前发送击键的文本。如果我在冒泡阶段添加一个事件监听器，div的文本内容将包含我刚输入的字符。

但事实并非如此：无论是在捕获还是冒泡阶段添加事件监听器，div的内容都不包括最近输入的字符。

以下是一个简单的测试用例：

<div id="captureTest" contentEditable='true' style='height: 30px; width: 400px; border-style:solid; border-width:1px'></div>

<script type="text/javascript">
    var div = document.getElementById('captureTest');
    div.addEventListener("keydown", function() {alert('capture: ' + this.innerHTML)}, true);
    div.addEventListener("keydown", function() {alert('bubble: ' + this.innerHTML)}, false);
</script>

我希望第二个函数的输出在输入字符后包含div的新文本，但似乎并非如此。

我的问题是：有没有办法从内容可编辑div中捕获击键事件并获取内容，因为键入键后它将是？我需要这个来实现预先输入功能。

我知道我可以停止事件然后使用executeCommand（'insertHTML'），但在处理删除，退格，粘贴和其他类型的插入时会出现故障，因此这不是解决方案。

我在Firefox 3中对此进行了测试。我知道IE没有addEventListener方法。

感谢您的任何建议！

Answer 1

你需要2个不同的回调，一个用于 keydown ，另一个用 keyup 或 keypress （仅当元素同时注册时才触发keydown + keyup）。