Javascript JSFIDLE不管理函数内的单击事件

我有一个非常简单的JSFiddle

HTML

<input type="button" value="Submit" id="myBtn" onclick="foo()">

以下是链接：

我已经在无换行模式下加载了脚本。奇怪的是，当我点击按钮时，

click

和

click3

会在控制台中打印，但

click2

不会打印。如果我再次点击它，我会得到两张打印的

click2

---

看起来

事件

未在小提琴中正确管理。有办法解决吗？

这是正确的行为。发生这种情况的原因是，当调用

foo

函数时，您绑定了事件

click

。第一次调用

foo

时绑定事件，第二次再次绑定事件，依此类推。绑定事件不会删除以前的绑定，因此如果您单击

submit

10次，您将绑定10个不同的

click

eventhandlers，所有操作都相同，您将在控制台中收到10次“click2”。

使用jquery或使用onclick属性在按钮上添加一个click处理程序，而不是同时使用这两个属性

我提供了两个例子来说明这一点：

函数foo（元素）{
console.log（element.id+”被单击与JSFIDLE无关，您的代码是错误的。它在浏览器中的行为方式完全相同。更具建设性的是，您的事件处理程序
foo
直接记录
click
和
click3
，在这两者之间只需添加另一个
click
处理程序，它将记录
click2
。因此您可以直到下一次单击它时才会看到。并且每次后续单击都会添加另一个处理程序，因此
click2
将被记录越来越多次。基本上，您不应该在事件处理程序中添加事件侦听器（对于同一事件）。
function foo(){
    console.log('click');

  $("#myBtn").click(function(event) {
    console.log('click2');
  });

    console.log('click3');

}