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

Question

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

For a non-bubbling event, the sequence of the dispatch is like this:

1. Capturing phase: All "capturing" event handlers are fired on all ancestor elements, from the top down.
2. The event is fired on the target element, which means that all event handlers registered on the element for the specific event are executed (in undefined order!)
3. The default action is performed (if it wasn't cancelled in any of the handlers)

For a bubbling event, the sequence is like this:

1. Capturing phase: All "capturing" event handlers are fired on all ancestor elements, from the top down.
2. The event is fired on the target element
3. Bubbling phase: The event is fired on all ancestor elements, from the target and upward.
4. The default action is performed (if it wasn't cancelled in any of the handlers)

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

现在有没有人知道如何在执行默认操作后附加回调？所以我想捕捉一个字符出现在文本区域中的事件。

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。