Question

我在文章（the article）中读到了关于事件处理程序的概念：

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


捕获阶段：全部“捕获”   事件处理程序被解雇了   祖先元素，从顶部   下来。

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

执行默认操作（如果   任何一个都没有被取消   处理程序）

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


捕获阶段：全部“捕获”   事件处理程序被解雇了   祖先元素，从顶部   下来。

该事件在目标上触发   元件

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

执行默认操作（如果   任何一个都没有被取消   处理程序）

这里，默认操作本质上是一个浏览器活动，用户在生成事件时期望，即按下键时在textarea中的字符外观。

现在是否有任何正文如何附加将在执行默认操作后调用的回调？所以我想在textarea中出现角色时抓住一个事件。

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

有什么想法吗？

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

Answer 1

这是一个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>

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

Answer 2

你需要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。

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

2 个答案: