为什么自定义函数会创建错误,但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的onclick函数,它调用注册的函数<div>,这当然是您的处理程序代码.因此,它是一个溢出堆栈的无限递归调用.

如果您将处理程序函数的名称更改为romanRoman()或者在单击的元素或任何封闭处不存在的其他内容<form>,则事情将更好地工作.