How to catch event after default action was performed in JavaScript

Question

Hi all,

I have read in the article (the article) following concepts about event handlers:

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)

Here, default action is essentially a browser activity which user expects when produced an event, i.e. character appearance in textarea when key was pressed.

Does any body now how attach callback that will be called after default action is performed? So I would like to catch an event when character appeared in textarea.

onchange is not a solution because it is fired when focus lost. onkeyup is not the solution also

Any ideas?

[UPD] I am trying to catch a textarea value change right after the change was happened. This is for copying value of textarea to a div. So when I use onkeydown event, the div content is updated with a delay of one key press. I want to have right after keypressed.

Answer 1

This is a hack, but it should work if you add the following line to your regular event handler:

setTimeout(functionToExecuteAfterDefaultAction, 0);

---

Sergii had the right idea: keypress/keyup actually fire after the modification of the textarea's value. Here's a jQuery-less example:

<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>

I know there were some problems with this approach when I implemented a growing textarea, but I can't remember what exactly went wrong :(

Answer 2

You need onkeyup/onkeypress combination:

<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>

This example uses jQuery.