问inline onclick是如何计算的？

EN

我很好奇inline元素属性事件的内容是如何在幕后工作的。

我们从一个简单的函数开始

function handler(e) {
    console.log(e);
}

使用案例1

如果我们想要将这个处理程序添加到按钮中，我们可以这样做：

<button onclick="handler();">Click Me</button>

点击登录：undefined

很公平，我们不传递参数就调用了一个函数。

使用案例2

如果我们现在将按钮更改为以event作为参数：

<button onclick="handler(event);">Click Me</button>

我们登录点击：MouseEvent{ ... }

现在我们记录事件，正如我们所期望的那样

使用案例3

但是如果我们只指定函数名呢？

<button onclick="handler">Click Me</button>

什么都没发生！，我希望只要给一个函数一个引用，就可以做到这一点。因此，当"onlick“发生时，引用的函数将使用适当的事件参数进行调用。

使用案例4

当我们在javascript中添加处理程序时：

const btn = document.getElementById('btn');
btn.onclick = handler;

它捕获事件并记录相关的event对象。

总结问题

无论我们以内联方式传递给onclick=""的是什么文本/内容/语句，它基本上都会在上面运行eval()吗？当我们将它附加到javascript (btn.onclick = ...)中时，它会经过适当的过程来拦截事件，然后调用绑定的处理函数并传递相应的事件对象(例如MouseEvent)？

快速笔记

需要明确的是，这是一个信息性的问题，可以理解基本原理，而不考虑它是被认为是坏的还是好的实践。这在这一点上不会被讨论。