Как перехватить событие после выполнения действия по умолчанию в JavaScript

Question

Я прочитал в статье ( в статье ) следующие понятия об обработчиках событий:

Для не всплывающих событий последовательность отправки так:

1. Фаза захвата: все "захват" обработчики событий запускаются на всех предки элементы, сверху вниз.
2. Событие выстреливает в цель элемент, который означает, что все события обработчики, зарегистрированные на элементе для конкретного события выполняются (в неопределенном порядке!)
3. Действие по умолчанию выполняется (если это не было отменено ни в одном из обработчики)

Для пузырящихся событий последовательность это так:

1. Фаза захвата: все "захват" обработчики событий запускаются на всех предки элементы, сверху вниз.
2. Событие выстреливает в цель Элемент * * тысяча двадцать-одна
3. Фаза барботирования: событие запускается на всех элементах предка, от цель и вверх.
4. Действие по умолчанию выполняется (если это не было отменено ни в одном из обработчики)

Здесь действие по умолчанию - это, по сути, действие браузера, которое пользователь ожидает при создании события, т.е. появление символа в текстовой области при нажатии клавиши.

Есть ли какое-либо тело сейчас, как присоединить обратный вызов, который будет вызываться после выполнения действия по умолчанию? Поэтому я хотел бы поймать событие, когда персонаж появился в textarea.

onchange не является решением, потому что оно срабатывает при потере фокуса. onkeyup также не является решением

Есть идеи?

[UPD] Я пытаюсь поймать изменение значения текстовой области сразу после того, как изменение произошло. Это для копирования значения 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

Это хак, но он должен работать, если вы добавите следующую строку в ваш обычный обработчик событий:

setTimeout(functionToExecuteAfterDefaultAction, 0);

---

У Сергея была правильная идея: 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>

Я знаю, что были некоторые проблемы с этим подходом, когда я реализовал растущую текстовую область, но я не могу вспомнить, что именно пошло не так: (