如何评估内联 onclick？

Question

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

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

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）？

快速笔记

需要明确的是，这是一个信息丰富的问题​​，要了解基本原理，而不管它被认为是好的还是坏的做法。目前不讨论这一点。

Answer 1

是的，在内联处理程序中，属性文本本质上只是evaled，带有一些限定条件。什么

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

大致相当于如果您有一个引用该handler函数但未调用它的（真实）处理程序，例如：

btn.onclick = () => {
  handler;
};

这不会引发错误（因为handler是可引用的），但它也不会运行handler，因为您只是引用该函数，而不是调用它。

当你这样做时

btn.onclick = handler;

您正在传递对内部结构的引用，然后在单击按钮时调用该引用。handleronclick

（如果您已经完成btn.onclick = handler;，将立即handler调用，并且其返回值将被添加为侦听器，这不是您想要的）

当你这样做时

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

您传递的参数event来自window.event，这就是为什么它是可引用的。

就像我说的，但是有一些限定条件：内联处理程序隐式地with(this)在运行的整个文本周围使用诸如 a 之类的东西，所this讨论的元素在哪里。（它也用于withand包含形式，正如您从昆汀的回答document中看到的那样）例如：

<a onclick="search();">Click me!</div>

对于口译员来说，看起来有点像：

<a onclick="
  with(this) {
    search();
  }
">Click me!</div>

这是有问题的，因为search是 的属性HTMLAnchorElement.prototype。如果这些变量名称是元素原型链上任何位置的属性，则引用其他变量名称可能会出现类似的问题。

最好完全避免内联处理程序，而是使用 Javascript 正确附加事件。