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

您不能像这样调用警报，因为它不再在窗口的上下文中执行。它在您单击的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>

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

1 个答案: