如何在JavaScript中捕获默认操作执行后的事件

Question

我在这篇文章（文章）中了解到关于事件处理程序的以下概念：

对于非冒泡事件，分派的顺序如下：

1. 捕获阶段：所有祖先元素上的“捕获”事件处理程序都会被触发。

2. 事件被触发在目标元素上，这意味着所有为特定事件注册在该元素上的事件处理程序都会被执行（顺序未定义！）。

3. 执行默认操作（如果在任何处理程序中没有被取消）。

对于冒泡事件，顺序如下：

1. 捕获阶段：所有祖先元素上的“捕获”事件处理程序都会被触发。

2. 事件被触发在目标元素上。

3. 冒泡阶段：事件被触发在从目标元素向上的所有祖先元素上。

4. 执行默认操作（如果在任何处理程序中没有被取消）。

这里，默认操作基本上是用户期望在产生事件时浏览器进行的活动，例如按键时在文本区域中出现字符。

有没有人知道如何附加回调函数，以在执行默认操作后调用它？因此，我想在字符出现在文本区域时捕获事件。

onchange不是解决方案，因为它在失去焦点时触发。onkeyup也不是解决方案。

有什么想法吗？

[更新] 我正在尝试在更改发生后立即捕获文本区域值更改。这是将文本区域的值复制到div中，因此当我使用onkeydown事件时，div内容会延迟一个按键的时间更新。我希望在按键后立即更新。

- glaz666

---

你试图做什么？如果您提供有关要解决的问题的更多信息，我们可能能够给出一个好的答案。没有直接的原因可以解释为什么 onchange 事件处理程序不起作用，并且具体来说，可能有一些可以尝试的解决方法。 - John Leidegren

Answer 1

您需要使用onkeyup/onkeypress组合：

<script type="text/javascript">
$(document).ready(function(){
    // single button (abcd)
    $("#source").keyup(function() {
        $("#target").html( $(this).val() );
    });
    // pressed button (aaaaaaaa)
    $("#source").keypress(function() {
        $("#target").html( $(this).val() );
    });
});
</script>
<textarea id="source"></textarea>
<div id="target"></div>

这个例子使用了jQuery。

- Sergii Galashyn

Answer 2

这是一种hack方法，但如果您将以下行添加到常规事件处理程序中，它应该可以工作：

setTimeout(functionToExecuteAfterDefaultAction, 0);

---

Sergii的想法是正确的：keypress/keyup事件在修改文本区域的值之后触发。以下是一个不需要jQuery的例子：

<form>
<textarea></textarea>
<textarea></textarea>
</form>
<script>
var elements = document.forms[0].elements;
elements[0].onkeypress = elements[0].onkeyup = function() {
    elements[1].value = elements[0].value;
};
</script>

我知道在实现一个可增长的文本框时，这种方法存在一些问题，但我不记得具体出了什么问题 :(

- Christoph

---

是的，这是一种hack方法，我相信当有很多这样的超时函数时，它可能会产生一些意想不到和不可预测的行为。 - glaz666

没错！我也在实现可增长的文本框！！：） - glaz666