我很好奇inline元素属性事件的内容是如何在幕后工作的。
我们从一个简单的函数开始
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
)?
快速笔记
需要明确的是,这是一个信息性的问题,可以理解基本原理,而不考虑它是被认为是坏的还是好的实践。这在这一点上不会被讨论。
https://stackoverflow.com/questions/56271111
复制相似问题