为什么不能将 onclick 处理程序设置为本机函数？ [复制]

Question

当一个元素的 onclick 事件处理程序直接设置为另一个元素的内置函数 click 时，即使在使用用户定义的中间函数时该事件也可以正常触发，该事件也无法触发。

同样，当 onclick 事件处理程序直接设置为内置函数 alert 时，即使它在使用用户定义的中间函数时也可以工作，但它会导致 TypeError: Illegal invocation。

奇怪的是，当 onclick 事件处理程序直接设置为 console.log 时，它按预期工作，尽管这也是一个内置函数。

click 和 alert 发生了什么导致直接赋值行为异常？为什么添加一个简单地转发调用的匿名函数会有什么不同？

const div1 = document.getElementById("1");
const div2 = document.getElementById("2");
const div3 = document.getElementById("3");
const div4 = document.getElementById("4");
const div5 = document.getElementById("5");
const div6 = document.getElementById("6");
const indicator = document.getElementById("indicator");

indicator.onclick = function() {
  if (indicator.style.background == "blue") {
    indicator.style.background = "green";
  } else {
    indicator.style.background = "blue";
  }
};

div1.onclick = function(event) {
  indicator.click(event);
};

div2.onclick = indicator.click;

div3.onclick = function(event) {
  alert(event);
};

div4.onclick = alert;

div5.onclick = function(event) {
  console.log(event);
};

div6.onclick = console.log;

#indicator {
  height: 100px;
  width: 100px;
}
div {
  cursor: pointer;
  text-decoration: underline;
}

<div id="1">Set indicator color via function (works)</div>
<div id="2">Set indicator color directly (silently fails)</div>
<div id="3">Trigger alert via function (works)</div>
<div id="4">Trigger alert directly (fails with error)</div>
<div id="5">Trigger console log via function (works)</div>
<div id="6">Trigger console log directly (works)</div>
<div id="indicator"></div>

Answer 1

你不能这样调用 alert，因为它不再在窗口的上下文中执行。它在您单击的 div 的上下文中执行。使用绑定，您可以将上下文更改回窗口，它会起作用。

const div4 = document.getElementById("4");

div4.onclick = alert.bind(window);

#indicator {
  height: 100px;
  width: 100px;
}
div {
  cursor: pointer;
  text-decoration: underline;
}

<div id="4">Trigger alert directly (fails with error)</div>