e.target.value 在“后面”显示值答案

【问题标题】：e.target.value shows values one key 'behind'e.target.value 在“后面”显示值
【发布时间】：2012-02-07 13:48:23
【问题描述】：

ID 为“typehere”的输入类型。在typhere 上设置了keydown 事件。简单的问题是e.srcElement.value 后面似乎有一个值键。即如果值应该 's' ，它的控制台'记录为空白 '' 。如果我输入 'ss' ，则显示的值为 's' 。我好像搞不懂这个。

console.log(e)，显示e.srcElement.value 的正确值（在控制台中），但console.log(e.srcElement.value) 显示错误值。为什么？

<script type="text/javascript">
            var xmlHttp = createXmlHttpRequestObject();
            selectOption = document.getElementById('choose_colony') ;

            document.body.onload = function () {
                typehere = document.getElementById('typehere') ;

                addAnEvent(typehere,"keydown",handleKeyDownevent,false )  ;
            }

            function handleKeyDownevent (e) {
                e = e || window.event ;
                if (xmlHttp) {
                    try {
                        //xmlHttp.open('GET' , 'async.txt', true ) ;
                           console.log(e.srcElement.value ) ;
                       var target=  e.target || e.srcElement ;
                        var typed = target.value      ;
                        if (typed != ""){
                            console.log('sennding request') ;
                            //ajax request
                        }
                        else {
                            console.log(e.srcElement.value + "is blank") ;
                        }
                    }
                    catch(e) {
                        console.log('could not connect to server') ;
                    }
                }

            }
</script>

脚本标签在</body>标签btw之前

【问题讨论】：

标签： javascript dom-events

【解决方案1】：

（对于可键入的字符，您通常需要keypress 而不是keydown，因为keypress 重复。）

keydown 在值更改之前被触发（keypress 也是如此），尤其是您可以取消按键，因此如果您想在值更改后处理该值，您可能希望使用推迟调用setTimeout(func, 0)。事件链展开后，您的呼叫将得到处理。（通常在 5-10 毫秒内。）

Live example

所以在您的代码中，可能如下所示：

addAnEvent(typehere,"keydown",function(e) { // or "keypress"
    e = e || window.event;
    setTimeout(function() {
        handleKeyDownevent(e);
    }, 0);
},false )  ;

【讨论】：

我在我的代码中实现它时遇到了麻烦。但这显然是解决方案。谢谢
keyup 有用吗？ ...以及应该等待用户释放密钥多长时间？
@Stefan：如果您使用keypress，这将不会成为问题。

【解决方案2】：

使用 keyup 事件而不是 keydown。

【讨论】：

【解决方案3】：

简单的答案在于，当您尝试确定事件中变量的值时，它由事件处理程序处理，因此最好简单地记录事件本身。因此，您可以尝试修改代码以适应这种情况，看看是否有帮助。另外，我不同意上述关于需要设置/包含超时（功能）的答案，除非您试图取消任何击键等。澄清：

<script type="text/javascript">
        var xmlHttp = createXmlHttpRequestObject();
        selectOption = document.getElementById('choose_colony') ;

        document.body.onload = function () {
            typehere = document.getElementById('typehere');
            addAnEvent(typehere, "keydown", function(e) { 
                e = e || window.event;
                handleKeyDownevent(e);}, false);
        }
function handleKeyDownevent (e) {
            e = e || window.event ;
            if (xmlHttp) {
                try {
                    //xmlHttp.open('GET' , 'async.txt', true ) ;
                       console.log(e.srcElement.value ) ;
                   var target=  e.target || e.srcElement ;
                    var typed = target.value      ;
                    if (typed != ""){
                        console.log('sennding request') ;
                        //ajax request
                    }
                    else {
                        console.log(e.srcElement.value + "is blank") ;
                    }
                }
                catch(e) {
                    console.log('could not connect to server') ;
                }
            }
          return true;
        }
</script>

希望对你有所帮助。底部的return true 允许浏览器的默认响应。

【讨论】：