Javascript dom节点上的自定义事件侦听器

我想从一个元素在js中调度一个自定义事件。是这样的：

var event = new CustomEvent("foo");
var elem = document.getElementById("bar");
elem.dispatchEvent(event);

但我无法在dom节点上绑定新自定义事件的侦听器。有了标准赛事，这很容易。只需在=“some javascript”

也可以使用自定义元素吗？我在上尝试了

，在-

上尝试了

，但没有成功

<button onfoo="console.log('foo!')"></button>
<button on-foo="console.log('foo!')"></button>

您可以使用
addEventListener
方法注册自定义事件处理程序。顺便说一句，本机事件也建议使用这种方法。内联处理程序很糟糕，因为它们混合了视图（HTML）和逻辑（js）


var elem=document.getElementById（“bar”）；
元素addEventListener（'foo'，function（）{
console.log（'foo-event-on-bar'）
})
document.getElementById（'foo'）。addEventListener（'click'，function（）{
var事件=新的CustomEvent（'foo'）；
要素调度事件（事件）；
})
条
触发器Foo
始终使用而不是内联事件侦听器

如果允许您执行以下操作：


const-button=document.querySelector（'button'）；
addEventListener（'foo'，函数（）{
console.log（'foo！'）；
});
常量事件=新事件（“foo”）；
按钮。dispatchEvent（事件）
点击
“总是”很教条。使用内联事件处理程序有很好的理由，尽管我会尽量缩短它们。如果您使用基于控制器的方法并在HTML中将组件连接在一起，这是一个很好的例子。
<button onfoo="console.log('foo!')"></button>
<button on-foo="console.log('foo!')"></button>