为什么 onclick 在 Javascript 中不起作用

Question

我正在尝试使用 onclick 在用户单击按钮时调用 function，这似乎不起作用。

例如：

function click(){
   console.log('you click it!')
}

<input type='button' id='submitbutton' value = 'Submit' onclick= 'click(); console.log("you used it in HTML")'>

如果我删除 onclick 中的 console.log，则不会有消息 console。

function click(){
   console.log('you click it!')
}

<input type='button' id='submitbutton' value = 'Submit' onclick= "click();">

该按钮将console消息you used it in HTML，我直接写在onclick里面，但将无法执行我分配给它的功能click()。

我认为这不是input[type='button']的问题，因为我们可以在input[type='button']中使用onclick。对于 example.

任何人都可以向我解释是什么导致代码不起作用吗？我知道解决这个问题的方法可能是使用 addEventListener，但是 为什么这行不通？

可能与重复，但此问题仅提供解决方案，并未解释原因。

感谢任何回复！

Answer 1

内联处理程序有一个非常非常奇特的范围链 - 因此（以及其他原因）不应使用，因为它们的行为可能不直观。

这里的click指的是HTMLElement原型上的.click：

<input type='button' id='submitbutton' value = 'Submit' onclick= 'console.log(click === HTMLElement.prototype.click)'>

所以你的 function click 和你的内联 click() 引用了不同的东西。当您点击：

内联处理程序将在按钮上运行 HTMLElement.prototype.click，导致同步调度第二个事件，这将再次触发同一个处理程序。但是它不会进入无限循环，因为 .click() 有一个 special flag 来防止这种情况发生。然后，you used it in HTML 被记录。
一旦处理完第二个 synthetic 事件，you used it in HTML 将再次从内联处理程序中记录。

另一种看待它的方式：

为函数使用不同的名称 - 或者，更好的是，完全避免使用内联处理程序。

Answer 2

你好错误是这样的：click()是一个javascript函数，把名字改成other。更多信息：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

function clicka(){
   console.log('you click it!')
}

<input 
type='button' 
id='submitbutton' 
value='Submit' 
onclick='clicka();console.log("you used it in HTML")'>

Why the onclick not working in Javascript