从JavaScript创建的按钮执行功能的正确方法？

我在使用Javascript的网页上创建一些简单的按钮，并且在点击它们时需要调用一个函数。我想出了以下搜索答案为基础的例子。但是，创建一个函数来调用函数似乎是错误的。我无法以其他方式直接调用脚本中其他位置的函数“click_button”。从JavaScript创建的按钮执行功能的正确方法？

这工作：

my_button.onclick = function(){ 
    click_button(my_button.value); 
    }

这些不工作：

// This executes on first run, but not when clicked. 
my_button.onclick = click_button(my_button.value); 
// This doesn't do anything when clicked. 
my_button.onclick = "click_button(my_button.value);";

是顶级的例子中，正确的方法来调用JavaScript中点击一个按钮的功能？

感谢您的任何帮助。

来源

2017-03-04 Tige Phillips

第一个示例是正确的，您还可以使用此语法添加事件侦听器my_button.addEventListener（“click”，myScript）;查看[this]（https://www.w3schools.com/jsref /event_onclick.asp） –

仅仅因为'onclick'应该是'callback（function）'在触发/触发时工作。 – Xlee

在第一个示例中，您为单击按钮时应调用的函数分配一个引用。这是对的。

在第二个示例中，您将click_button函数的结果分配给onclick。因此，当您的代码被引擎读取时，它会执行您的click_button功能并将结果值分配给onclick。所以当你点击你的按钮时，没有函数可以执行，只是一个值。

在第三个示例中，您只需为onclick指定一个字符串。这是行不通的。

所以是第一种方法是正确的方法。

来源

2017-03-04 01:02:55

让我解释为什么你最后的两个例子做不工作启动：

my_button.onclick = click_button(my_button.value);

这将执行click_button()功能向右走，并分配任何函数返回my_button.onclick

my_button.onclick = "click_button(my_button.value);";

这只是将my_button.onclick的值设置为一个字符串。该按钮的onclick属性不期待带有JavaScript代码的字符串，并且它不会以这种方式评估它。

你可以看到onclick财产如何在这里工作： https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick

分配给onclick的功能将被传递一个MouseEvent。你click_button函数接受一个值作为参数，所以截至目前，你不能简单地本身的功能分配给onclick像这样：

my_button.onclick = click_button // won't be given my_button.value

因为传递是值将是一个MouseEvent，不是你期望。

如果修改了click_button功能不需要值的参数，那么你可以这样做：

function click_button() { 
    // Do stuff using this.value or my_button.value directly 
} 

my_button.onclick = click_button

否则，如果你希望能够通过my_button.value的功能，你需要用它在另一个函数中，就像你在第一个例子中做的那样。

由于@Mikey在评论中指出的那样，你可以通过使用this.value功能的内部获得的价值。 MDN文档声明this将被设置为该函数内的元素。

来源

2017-03-04 01:02:20 andreyrd

很好的答案。在你的最后一个例子中，他也可以在函数内用'this.value'访问值。 – Mikey

@Mikey哦！太棒了，我没有意识到这一点。现在我在MDN文档中看到它确实提到了“这个”将成为元素。我会更新我的答案。 – andreyrd

从JavaScript创建的按钮执行功能的正确方法？

回答

相关问题