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

Question

我在文章 (the article) 中阅读了以下有关事件处理程序的概念：

对于非冒泡事件，序列 调度是这样的：

1. 捕获阶段：所有“捕获” 事件处理程序被触发所有 祖先元素，从顶部开始 下来。
2. 在目标上触发事件 元素，这意味着所有事件 在元素上注册的处理程序 针对特定事件执行 （按未定义的顺序！）
3. 执行默认操作（如果 它没有被取消 处理程序）

对于冒泡事件，序列 是这样的：

1. 捕获阶段：所有“捕获” 事件处理程序被触发所有 祖先元素，从顶部开始 下来。
2. 在目标上触发事件 元素
3. 冒泡阶段：事件被触发 在所有祖先元素上，从 目标和向上。
4. 执行默认操作（如果 它没有被取消 处理程序）

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

现在是否有任何机构在执行默认操作后如何附加回调？所以我想在文本区域中出现字符时捕捉一个事件。

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

有什么想法吗？

[UPD] 我试图在更改发生后立即捕获 textarea 值更改。这是为了将 textarea 的值复制到 div 中。因此，当我使用 onkeydown 事件时，div 内容会延迟一键更新。我想在按键后立即拥有。

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。

Answer 2

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

setTimeout(functionToExecuteAfterDefaultAction, 0);

---

Sergii 的想法是正确的：keypress/keyup 实际上是在修改 textarea 的值后触发的。这是一个没有 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>

当我实现一个不断增长的文本区域时，我知道这种方法存在一些问题，但我不记得到底出了什么问题:(