我很好奇内联元素属性事件的内容是如何工作的。
我们从一个简单的函数开始
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 = ...
) 中附加它时,它会通过适当的过程来拦截事件,然后调用有界处理函数并将相应的事件对象传递给它(例如 鼠标事件
)?
速记
需要说明的是,这是一个提供信息的问题,目的是了解基本原理,而不管它被认为是好的还是坏的做法。目前不讨论这个问题。
最佳答案
是的,在内联处理程序中,属性文本本质上只是 eval
ed,带有一些限定条件。什么
<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 正确附加事件。
关于javascript - 内联onclick是如何评估的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56271111/