我们从一个简单的函数开始。
function handler(e) {
console.log(e);
}
使用案例1
如果我们想要将此处理程序添加到我们的按钮中,我们可以执行以下操作:
<button onclick="handler();">Click Me</button>
点击哪些日志:未定义
好的,我们调用了一个没有传递参数的函数。
用例2
如果我们现在将按钮更改为接受事件
作为参数:
<button onclick="handler(event);">Click Me</button>
我们记录点击事件:MouseEvent{ ... }
现在我们记录事件,正如我们所预期的那样
用例3
但是如果我们只指定函数名称呢?
<button onclick="handler">Click Me</button>
什么都没有发生!我希望只是给出一个函数的引用就可以解决问题。因此,当“onclick”事件发生时,引用的函数将被调用并传递相应的事件参数。
用例4
当我们在JavaScript中添加处理程序时:
const btn = document.getElementById('btn');
btn.onclick = handler;
它起作用了,捕获事件并记录相关的event
对象。
结束问题
我们将任何文本/内容/语句传递给onclick =""
内联时,基本上会在其中运行eval()
吗?当我们在javascript中附加它(btn.onclick =...
)时,它通过正确的过程拦截事件,然后调用有限的处理程序函数,并将相应的事件对象传递给它(例如MouseEvent
)?
简要说明
明确一点,这是一个信息性问题,旨在理解基础知识,而不考虑它是否被视为良好或不良实践。这一点没有被讨论。
with
可能会导致一些可怕的事情发生(参见 https://dev59.com/eVwZ5IYBdhLWcg3wTOzr),因此属性所发生的事情并不简单。 - Quentin