事件监听器不工作？答案

【问题标题】：Event listener not working?事件监听器不工作？
【发布时间】：2014-03-06 23:55:52
【问题描述】：

很抱歉有这么多问题，但我不擅长 javascript 并且想精通它。当您按下按钮时，我试图让页面更改颜色作为我的另一个概念证明，但它不起作用，我不完全确定为什么......

<html>
<head>
</head>
<body>
<button Id="BGchange">BUTTON!</button>
<script type="text/javascript">
button.eventlistener(BGchange, BGcolor());
function BGcolor (){
var BG = BG2+1
var BG2 = BG
if(BG==0){
    document.body.style.background = white;
}
else
    if(BG==1){
        document.body.style.background = black;
    }
}
</script>
</body>
</html>

k，修正了一点，这是我现在的：

<html>
<head>
</head>
<body>
<button Id="BGchange">BUTTON!</button>
<script type="text/javascript">
BGchange.addEventListener("click", BGcolor);
var BG++
function BGcolor (){
if(BG==0){
backgroundcolor = "white";
}
else
    if(BG==1){
    backgroundcolor = "black";
    }
}
</script>
</body>
</html>

【问题讨论】：

button.eventlistener(BGchange, BGcolor()); 这行是什么意思？
什么是button？ eventlistener 是什么？ BGchange 是什么？但即使不知道我可以告诉你，此时调用 BGcolor 是错误的。查看这些文章以了解事件处理：quirksmode.org/js/introevents.html。
...什么是BGchange，为什么是BGcolor()
那一行表示它感知到BGchange，并启动函数BGcolor。
bgchange 只是一个 ID

标签： javascript addeventlistener

【解决方案1】：

如果您尝试监听事件点击，那么您需要这样的东西：

 document.getElementById("BGchange").addEventListener("click", BGcolor);

然后，你需要在这个函数中修复一些东西：

function BGcolor (){
    var BG = BG2+1
    var BG2 = BG
    if(BG==0){
        document.body.style.background = white;
    } else if (BG==1) {
        document.body.style.background = black;
    }
}

因为您在初始化之前尝试引用BG2，所以不清楚您想在那里做什么。

按顺序，我改变的东西：

使用document.getElementById()获取按钮的DOM元素
使用addEventListener()，这是添加事件处理程序的标准方式
更改为单击事件，这是您单击按钮时创建的按钮
仅将事件处理程序的引用作为BGcolor 传递，不带括号。您是立即调用它，而不是传递对以后可以调用的函数的引用。

此外，还有很多问题需要在您的 BGcolor() 函数中修复：

从一个函数调用到下一个函数调用记住其状态的变量必须在该函数之外声明。
颜色值是一个字符串，因此您可以使用"white"，而不是white。
要仅更改背景颜色，最好使用backgroundColor 属性。

这是一个工作版本：

<button Id="BGchange">BUTTON!</button>
<script type="text/javascript">
document.getElementById("BGchange").addEventListener("click", BGcolor);

var curColor = "white";
function BGcolor (){
    if (curColor == "white") {
        curColor = "black";
    } else {
        curColor = "white";
    }
    document.body.style.backgroundColor = curColor;
}
</script>

工作演示：http://jsfiddle.net/jfriend00/Nk2N5/

【讨论】：

这必须是您分配事件处理程序的 id 还是可以是标签名或类名？
@CodedContainer - 将事件处理程序分配给 DOM 元素。为此，您必须获得对 DOM 元素的引用。有很多方法可以做到这一点。使用带有document.getElementById() 的id 是获取DOM 元素的一种方法。您还可以使用许多其他方法，包括类名、标签名等……但是，id 的一个优点是只有一个元素具有给定的 id，因此使用 id 获取单个 DOM 元素更简单。可以为许多不同的 DOM 元素分配一个类名，显然，给定标记类型可以有许多元素。
如果我追加一个新的表单组并想使用相同的事件监听器会发生什么？这会不会有原因？