使用事件处理程序时发生全局变量问题（基本Javascript）

最近我在使用DOM事件处理程序时遇到了问题。接下来i'll描述该问题相关的东西：使用事件处理程序时发生全局变量问题（基本Javascript）

代码

<!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）应该保持做给它的功能。本里面的变化是由于直接使用它的功能IM的事实，没有使用一rgument。

注：

当我直接两次上的代码调用函数它的工作原理（代替处理）正确。

F1（）; // 1个

F1（）; // 2
从来就用铬和Firefox进行了测试。

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

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

来源

2014-10-04 Alex Y.

@torazaburo：函数声明被挂起。 – 2014-10-04 07:55:48

您需要添加一个窗体onsubmit处理程序，取消提交。由于页面重新加载，正在重置该值。

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

</form>

这样做。

这是jsfiddle。尝试删除并添加onsubmit处理程序，以更清晰地在jsfiddle上查看它。

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

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

来源

2014-10-04 05:29:44

将JavaScript事件处理程序直接放入HTML中并不好。 – dbme 2014-10-04 06:01:47

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

来源

2014-10-04 06:00:08 dbme

由于已经建立，您会看到此行为，因为单击此按钮可提交表单并重新加载页面。

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

来源

2014-10-04 07:54:34

使用事件处理程序时发生全局变量问题（基本Javascript）

回答

相关问题