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

Issue with global variables when using event handlers(basic Javascript)

本文关键字：全局变量 问题 Javascript 事件处理 程序 基本      更新时间：2023-09-26

最近我在使用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测试过了。

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

希望你们能帮助我！谢谢

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

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

那就行了。

这是一把小提琴。尝试删除和添加onsubmit处理程序，以便在jsfiddle上更清楚地看到它。

您还可以选择将点击事件切换为表单上的onsubmit，并在onsubmit事件中使用preventDefault，而不是在HTML中使用onsubmit（至少在现代浏览器中是这样）。在旧版本的IE中，你必须做一些不同的事情。

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

此问题是提交按钮正在提交表单，很可能导致页面刷新并将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；

正如已经确定的那样，您会看到这种行为，因为单击按钮会提交表单并重新加载页面。

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

相关文章：