javascript - 内联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 = ...) 中附加它时，它会通过适当的过程来拦截事件，然后调用有界处理函数并将相应的事件对象传递给它(例如 鼠标事件)?

速记

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

Answer 1

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

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

大致等同于如果你有一个(真正的)处理程序，它引用 handler 函数但没有调用它，例如:

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

这不会抛出错误(因为 handler 是可引用的)，但它也不会运行 handler，因为您只是在引用函数，而不是调用它。

当你做的时候

btn.onclick = handler;

您正在将 引用 传递给 handler 到 onclick 内部，稍后将调用该引用，单击按钮时。

(如果您已完成 btn.onclick = handler;，handler 将立即被调用，其返回值将添加为一个听众，这不是你想要的)

当你做的时候

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

您传递的 event 参数来自 window.event ，这就是它具有引用值(value)的原因。

就像我说的，虽然有一些限制条件:内联处理程序在运行的整个文本周围隐式地使用类似 with(this) 的东西，其中 this是有问题的元素。 (它还使用 with 作为 document 和包含表单，正如您从 Quentin's answer 中看到的那样) For example :

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

在解释器看来，有点像:

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

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

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