You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

event与$event传参差异及$event报错原因咨询

为什么event能正常运行,$event却报错?

嘿,这个问题其实涉及到原生浏览器事件机制和前端框架语法糖的核心区别,我给你拆解清楚:

1. 原生浏览器里的event是什么?

当你在原生HTML的onclick这类事件属性里写代码时,浏览器会自动在这个代码的作用域中注入一个名为event的特殊变量,它指向当前触发的事件对象。所以你写IWasClicked(event)时,这个event是浏览器已经帮你准备好的,自然能正常传递给函数。

2. $event是啥?为啥原生环境用不了?

$eventVue、Angular这类前端框架自定义的语法糖,只有在这些框架的模板编译环境中才会被识别。框架会把模板里的$event替换成对应的原生事件对象,让你能在框架的方法里拿到事件信息。

但你的代码是纯原生HTML+JavaScript的场景,没有任何框架参与解析模板,浏览器根本不知道$event是什么东西,所以直接抛出了$event is not defined的错误——它在当前作用域里完全不存在。

3. 额外提个更规范的原生写法

其实原生JS里更推荐用事件监听的方式绑定事件,而不是在HTML里写onclick属性,比如:

// 获取元素
const aboutLink = document.querySelector('#about .selected-button');
// 绑定点击事件
aboutLink.addEventListener('click', function(event) {
  alert("clicked again with event", event);
});

这种方式下,事件对象会自动作为第一个参数传入回调函数,不需要手动传递event变量,代码也更易维护。

内容的提问来源于stack exchange,提问作者Manu Chadha

火山引擎 最新活动