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

Question

我想从元素中调度js中的自定义事件。 就像这样：

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

但是我无法为dom节点上的新自定义事件绑定侦听器。 使用标准事件很容易。 只需on<eventName>="some javascript"添加属性

<button onclick="console.log('click!')"></button>

自定义元素也可能吗？ 我on<elementName>和on-<elementName> on<elementName>尝试过on<elementName>但是它不起作用。

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

Answer 1

您可以使用addEventListener方法注册自定义事件处理程序。 顺便说一句，这种方法也推荐用于本地事件。 内联处理程序很糟糕，因为它们将视图（HTML）与逻辑（js）混合在一起。

 var elem = document.getElementById("bar"); elem.addEventListener('foo', function() { console.log('foo event on bar') }) document.getElementById('foo').addEventListener('click', function() { var event = new CustomEvent('foo'); elem.dispatchEvent(event); }) 

 <button id="bar">Bar</button> <button id="foo">Trigger Foo</button> 

Answer 2

始终使用addEventListener而不是内联事件侦听器！

如果允许您这样做：

 const button = document.querySelector('button'); button.addEventListener('foo', function () { console.log('foo!'); }); const event = new Event('foo'); button.dispatchEvent(event); 

 <button>Click</button>