事件捕获与使用 contentEditable div 冒泡

Question

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

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

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

但情况似乎并非如此：无论是在捕获阶段还是在冒泡阶段添加事件侦听器，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 中捕获击键事件并获取内容，因为它将在键入键之后 ？我需要这个来实现 typeahead 功能。

我知道我可以停止事件，然后使用 executeCommand('insertHTML')，但是在处理删除、退格、粘贴和其他类型的插入时，这会出错，所以这不是解决方案。

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

感谢您的任何建议！

Answer 1

您需要 2 个不同的回调，一个用于 keydown，另一个用于 keyup 或 keypress（仅当元素同时注册了keydown + keyup)。