javascript - 为什么通过内联 onclick 添加的 addEventListener 会立即触发引用的函数？

Question

在最近的一个项目中，我继承了一些代码，这些代码给我带来了一些问题。

有人可以解释为什么从内联 onclick 函数添加事件监听器会立即触发 addEventListner() 中引用的函数吗？

function refFunction() {
  console.log("Test Function");

  if (document.removeEventListener) {
    document.removeEventListener('click', refFunction, false);
  } else if (document.detachEvent) {
    document.detachEvent('onclick', refFunction);
  }
}

function addEvtLstnr() {
  if (document.addEventListener) {
    document.addEventListener('click', refFunction, false);
  } else if (document.attachEvent) {
    document.attachEvent('onclick', refFunction);
  }
}

<input type="button" value="Add Evt listener" onClick="addEvtLstnr();">

请在此处查看 JSfiddle:Example JSFiddle

我想要的效果是添加带有按钮内联 onclick 的事件处理程序，但不会立即触发引用的函数。

感谢任何帮助，J.

Answer 1

单击按钮时，监听器将添加到文档中。然后，单击事件冒泡到文档，触发监听器。

为了避免这种情况，请使用超时来添加监听器，以便事件在添加之前完成冒泡。

或者，停止事件的传播，这样它就不会冒泡。

function refFunction() {
  console.log("Test Function");

  if (document.removeEventListener) {
    document.removeEventListener('click', refFunction, false);
  } else if (document.detachEvent) {
    document.detachEvent('onclick', refFunction);
  }
}

function addEvtLstnr() {
  if (document.addEventListener) {
    document.addEventListener('click', refFunction, false);
  } else if (document.attachEvent) {
    document.attachEvent('onclick', refFunction);
  }
}

// Call addEvtLstnr after a pause so event finishes bubbling before listener added
<input type="button" value="Add Evt listener" onclick="setTimeout(addEvtLstnr, 0);">

// Stop propagation of the event so that it doesn't reach the listener
<input type="button" value="Add Evt listener 2" onclick="addEvtLstnr();event.stopPropagation();">

顺便说一句，函数声明不以分号结尾。 ;-)