gpt4 book ai didi

javascript - 为什么不能将 onclick 处理程序设置为 native 函数?

转载 作者:行者123 更新时间:2023-11-30 19:42:43 26 4
gpt4 key购买 nike

<分区>

当一个元素的 onclick 事件处理程序直接设置为另一个元素的内置函数 click 时,即使它在使用用户定义的中间函数。

同样,当 onclick 事件处理程序直接设置为内置函数 alert 时,它甚至会导致 TypeError: Illegal invocation尽管它在使用用户定义的中间函数时有效。

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

clickalert 是怎么回事导致直接赋值行为异常?为什么添加一个简单地转发调用的匿名函数会有什么不同?

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>

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com