问inline onclick是如何计算的？

EN

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

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

大致相当于你有一个引用了handler函数但没有调用它的(true)处理程序，例如：

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

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

当你这样做的时候

btn.onclick = handler;

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

(如果您执行了btn.onclick = handler;，handler将被立即调用，并且它的返回值将被添加为侦听器，这不是您想要的)

当你这样做的时候

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

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

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

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

对于解释器来说，看起来有点像：

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

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

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

这不是发生的事情，但你可以这样想象：

假设javascript引擎将onclick属性的内容保存为字符串，当用户单击该元素时，将计算该内容。

例如：

​

function foo(a, b) {
  alert(a + ' ' + b);
}

<button onclick="foo('hello', 'world')">click me</button>

​

​

<button onclick="(function () { alert ('I\'m an inline IIFE') })()">click me</button>

​

这是与eval("foo('hello', 'world')"相同的结果。如果您传递event或this或其他关键字怎么办？

好吧，同样在这里，你可以想象一个javascript引擎这样做：

var this = /* create context */;
var event = /* create event */;
eval("foo(this, event)");

这就是规范所说的，属性需要求值！我并不是说引擎使用eval :P

示例：

​

<button onclick="alert('hello world')">Click me</button>

​

那btn.onclick = handler;呢？

这是另一双鞋。onclick属性是一个回调，它需要一个函数引用。

当您为事件使用HTML属性时，您实际上在幕后创建了一个函数，该函数被指定为相关事件的处理程序。

• 函数的主体是属性的内容。它应该是JavaScript代码。
• 函数将event参数

作为参数获取

所以,

在第一种情况下，生成的处理程序：

function handlerHtml(event) {
    handler()
}

在第二种情况下，生成的处理程序：

function handlerHtml(event) {
    handler(event)
}

在情况3中，生成的处理程序：

function handlerHtml(event) {
    handler
}