该onclick
属性标识当用户单击此特定元素时应该发生什么。在您的情况下,您要求运行一个函数;当函数运行时,您可以放心,该按钮已被单击——毕竟这就是函数本身如何启动(除非您以其他方式调用它)。
您的代码有点混乱,但是假设您有两个按钮,并且您想知道单击了哪个按钮,并通过stateTextBox
值通知用户:
(function () {
// Enables stricter rules for JavaScript
"use strict";
// Reference two buttons, and a textbox
var playButton = document.getElementById("play"),
stateTextBox = document.getElementById("state"),
ignoreButton = document.getElementById("ignore");
// Function that changes the value of our stateTextBox
function changeState(event) {
stateTextBox.value = event.target.id + " was clicked";
}
// Event handlers for when we click on a button
playButton.addEventListener("click", changeState, false);
ignoreButton.addEventListener("click", changeState, false);
}());
您可以在http://jsfiddle.net/Y53LA/现场测试此代码。
请注意我们如何在playButton
和上添加事件侦听器ignoreButton
。这允许我们保持我们的 HTML 干净(不需要onclick
属性)。changeState
每当用户单击它们时,这两者都会触发该功能。
在changeState
函数中,我们可以访问一个event
对象。这为我们提供了有关发生的特定事件(在本例中为click
事件)的一些详细信息。该对象的一部分是target
,它是被单击的元素。我们可以从该元素中获取属性id
,并将其放入value
.stateTextBox
这是调整后的 HTML:
<input type="button" value="Play with Pogo" id="play" />
<input type="text" id="state" />
<input type="button" value="Ignore with Pogo" id="ignore" />