使用事件处理程序时出现全局变量问题(基本Javascript)

时间:2014-10-04 05:24:49

标签: javascript

最近我在使用DOM事件处理程序时遇到了问题。接下来我将描述问题相关的东西:

代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form >
        <input id="b1" type="submit"  value="Click" />

    </form>

    <script>
       //global variable 
       var v= 0;

       var b1= document.getElementById("b1");

       b1.addEventListener("click", f1, false);

       function f1() {
           window.alert(++v);
       }

    </script>

</body>
</html>

代码应如何运作?

按下按钮(b1)时,全局变量(v)会在每次单击按钮时逐渐增加其值。窗口将提示新值。

问题:

变量不保留其最新值。例如,当我单击按钮两次时,窗口应该警告2但是我仍然得到1.

断言:

  • 全局变量(v)应该在函数内部对它进行更改。这是因为我直接在函数上使用它而不使用参数。

备注:

  • 当我直接在代码上调用该函数两次时它正常工作(而不是处理程序)。

    F1(); // 1

    F1(); // 2

  • 我已经使用Chrome和Firefox对其进行了测试。

那么,这里发生了什么?为什么它不能正常工作?事件处理程序与全局变量的工作方式不同吗?

希望你们能帮助我!谢谢!

3 个答案:

答案 0 :(得分:3)

您需要添加取消提交的表单onsubmit处理程序。正在重置该值,因为页面已重新加载。

<form onsubmit="return false;">
    <input id="b1" type="submit"  value="Click" />

</form>

那就可以了。

这里是jsfiddle。尝试删除并添加onsubmit处理程序,以便在jsfiddle上更清楚地看到它。

您也可以选择在表单上为onsubmit切换click事件,并在onsubmit事件上使用preventDefault,而不是在HTML中使用onsubmit,至少在现代浏览器中是这样。在IE的旧版本中,您必须以不同的方式执行此操作。

   function f1(event) {
       event.preventDefault();
       window.alert(++v);
   }

答案 1 :(得分:0)

此问题是提交按钮正在提交您的表单,最有可能导致页面刷新并将v重置为0.您可以使用事件对象上的preventDefault方法阻止此行为传递给你的回调函数:

//global variable 
var v= 0;

var b1 = document.getElementById("b1");
b1.addEventListener("click", f1, false);

// e is the event object
function f1(e) {
    // calling preventDefault will prevent the form from being submitted
    e.preventDefault();
    console.log("b1 click", ++v)
}

只是一种风格的说明,使用++v会让人感到困惑。您最好使用v += 1;

答案 2 :(得分:0)

如前所述,您会看到此行为,因为单击该按钮会提交表单并重新加载页面。

最简单的解决方案是删除<form>元素。