為什么我不能 setAttribute('onclick', function() { ... })？

Question

我試過這個：

<div id="a">A</div>
<div id="b">B</div>
<script>
let a = document.getElementById('a');
let b = document.getElementById('b');
a.onclick = function() { alert('hi from a'); };
b.setAttribute('onclick', function() { alert('hi from b'); });
</script>

單擊 A 會顯示一個警報。 單擊 B 會發出此錯誤消息： Uncaught SyntaxError: Function statements require a function name 。 為什么？

https://codepen.io/issactrotts/pen/yLYEXKZ

Answer 1

屬性值是字符串，而不是函數。

請改用addEventListener 。

Answer 2

顯示此錯誤是因為 setAttribute 只獲取字符串而不是 function

如果您想添加應該使用的事件，您的代碼不正確

b.onclick = function(){};

或者

b.addEventListener("click",function(){});

但是如果你想設置 onclick 屬性你不能設置 function 你可以使用這個

function bclick() { alert("hi from b"); }
b.setAttribute("onclick", "bclick()");

或者你可以使用 toString()

b.setAttribute("onclick", (function(){alert("hi from b");}).toString());

但是當我點擊那個沒有做的時候，因為它只是存在 function 沒有運行

您可以在值中使用字符串

b.setAttribute("onclick", 'alert("hi from b")';