為什么自定義函數會創建錯誤，但console.log不會出現點擊事件？

Question

我有兩個相同的<div>元素和不同的偵聽器onClick事件。

 function onclick() { console.log("onclick"); } 

 .some-styles { margin: 10px; border: 1px solid black; } 

 <div id="fisrt" class="some-styles" onclick="onclick()" > Click the text to see in the console </div> <div id="second" class="some-styles" onclick="console.log('without error')" > Click the text to see in the console </div> 

#first <div>使用自定義函數onclick()創建Uncaught RangeError: Maximum call stack size exceeded

#second <div>使用console.log()函數，該函數不會產生任何錯誤。

關於以上信息，我有一個問題：

1）為什么自定義函數會創建錯誤而console.log不會？

Answer 1

當您使用onxxx屬性來創建事件處理函數時，您將獲得一個使用復雜范圍構造的函數。 處理函數代碼范圍內的事物（即屬性文本中的代碼）是涉及的元素; 在這種情況下， <div> 。 <div>所有屬性都將作為事件處理程序代碼的本地符號提供，特別是包括onclick屬性。

因此，您的代碼不會調用您聲明為（可能是）全局符號onclick的函數，它正在調用使用<div>注冊的onclick函數，這當然是您的處理程序代碼。 因此，它是一個溢出堆棧的無限遞歸調用。

如果將處理程序函數的名稱更改為romanRoman()或其他不作為已單擊元素或任何封閉<form>的屬性存在的名稱，則事情會更好。